所有工具
Text Shadow Generator
CSS text shadow
CSS text shadow 在您的瀏覽器中本地執行
Preview text
CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
文字陰影產生器透過即時預覽和 CSS 設定文字後面陰影的偏移、模糊、顏色和不透明度。與 box-shadow 不同，它沒有展開值，這讓人們感到困惑：使文字陰影更重的唯一方法是在一個宣告中堆疊多個陰影。它對於易讀性最有用，可以在照片上的淺色文字後面新增微妙的深色陰影，並且它永遠不應該使文字可讀，因為它會在背景發生變化時消失。
Where people use the
- 新增微妙的陰影，以便在照片上顯示標題。
- 製作壓製或雕刻的標題效果。
- 製作復古或霓虹燈文書處理。
- 測試陰影需要有多重才顯得廉價。
How to use the
- 1
設定偏移量
偏移 X 向右移動，偏移 Y 向下移動。一兩個畫素的偏移讀取為深度；任何更大的東西都開始看起來像陰影。
- 2
設定模糊
模糊可以柔化邊緣。零提供了文字的硬複製，這就是輪廓和復古效果的製作方式。
- 3
選擇顏色和不透明度
淺色背景上的深色文字需要淺色陰影，反之亦然。保持較低的不透明度，除非您想要明顯的效果。
- 4
複製 CSS
該規則包括 rgba 顏色，準備貼上。
- 5
如果您需要更多重量，請堆疊陰影
在樣式表中加入第二個陰影，並用逗號分隔。這是加厚文字陰影的唯一方法，因為沒有擴散。
提示和最佳實踐
- 少即是多：低不透明度的一兩個畫素勝過嚴重的模糊。
- 切勿僅依賴影子來實現可訪問性；修復下面的對比度。
- 請記住，該屬性是繼承的，因此將其範圍限制為您所指的元素。
常見問題
為什麼沒有點差值？
因為text-shadow不支援。它的語法是偏移量 X、偏移量 Y、僅模糊和顏色。為了模擬擴散，您可以堆疊幾個偏移量略有不同的相同陰影。
我可以用它來使影像上的文字可讀嗎？
只能作為補充。陰影在邊緣有幫助，但在繁忙區域則失敗，並且它不計入 WCAG 對比度（根據背景顏色進行測量）。如果易讀性確實很重要，請新增稀鬆布或實心面板。
如何勾勒文字輪廓？
在每個方向的正負一個畫素處堆疊四個陰影，模糊為零。這會產生輪廓效果，而不需要 -webkit-text-lines，但並非所有地方都支援。
它會減慢頁面速度嗎？
單一靜態陰影幾乎不需要任何成本。對文字陰影進行動畫處理，或將大的模糊陰影應用於大量文本，是重繪成本出現的地方。
是否被子元素繼承？
是的。文字陰影是繼承的，因此將其設定在容器上會將其應用於每個帶有文字的後代，這有時會令人驚訝。