CSS 文字陰影：圖層、溢出與文字可讀性

圖層順序與繼承會改變繪製結果

CSS text-shadow 接受以逗號分隔的陰影清單。陰影由前往後繪製，因此第一層陰影在最上方；這是繪製順序，不是濾鏡串列。每層會套用在字形及其文字裝飾上。此屬性會繼承，後代文字會接收繼承的陰影，除非自行指定 text-shadow。

CSS Text Decoration Level 3 中，陰影畫在底線、頂線及文字下方；刪除線則畫在文字上方。粗陰影、底線或刪除線碰到字形時，順序可能影響辨識；請比較完整文字，不只看單一字母。

依需要跟隨的形狀選擇陰影

text-shadow 跟隨文字字形與裝飾；box-shadow 跟隨元素盒子，包含圓角；drop-shadow() 濾鏡則跟隨實際繪製的 alpha 輪廓，適合透明圖片等不規則形狀，且屬於不同的 filter 串列與語法。卡片邊緣請參閱 box-shadow 指南；需要沿輪廓投影時，才使用濾鏡。

CSS Text Decoration Level 3 的 text-shadow 不接受擴展距離或 inset，選用的模糊半徑也不能為負值。較新的 Level 4 草案為文字陰影描述 spread 與 inset，但本版工具不提供這些語法；使用草案功能前，請先確認瀏覽器支援。

繪製溢出不會在版面中預留空間

文字陰影可能畫到字形之外，而且不會裁切在文字輪廓內。這屬於墨跡溢出：不會讓鄰近內容重新排版，也不會擴大可捲動溢出區域。鄰近邊緣、其他堆疊環境或預覽框仍可能遮住繪製結果，請在實際元件檢查。

陰影是裝飾，不是 WCAG 合格證明。請檢查實際文字與背景對比、字級、字重、換行及焦點指示；光暈可能讓字緣更難辨識。強制色彩模式會在繪製時將 text-shadow 強制設為 none。不要用 forced-color-adjust: none 恢復裝飾陰影；即使沒有陰影，也要讓內容意義與焦點保持清楚。

使用實際文字與系統字型預覽

字形輪廓會隨指定字型與後備字型改變；emoji 也可能使用獨立的彩色字型。瀏覽器與作業系統的點陣化方式也可能不同。本工具使用系統字型，不匯出 font-family 宣告，因此相同 CSS 在網站上可能呈現不同。請比較原文與陰影文字，再檢查目標瀏覽器、語言、字型堆疊、換行與縮放。

預覽只供視覺比較，不是版面模擬或無障礙測試。長文、窄容器、多種文字系統與 emoji 可能暴露短範例看不出的碰撞。不同視窗寬度下的流動字級也會再次改變結果；請在支援尺寸檢查元件。

了解四層編輯器限制

工具預設 soft，另有 soft、glow、retro 與 none，可編輯最多四層有序陰影。選擇預設會取代目前圖層編輯；若內容已修改，會先顯示行內確認。關閉或刪除全部圖層時輸出 text-shadow: none;。停用圖層不參與驗證或輸出；啟用圖層無效時，CSS 與效果預覽都會停用。

每層 X、Y 位移範圍為 −100px 至 100px，模糊為 0px 至 100px，最多一位小數；不透明度為 0 至 1，最多兩位小數；顏色接受 3 或 6 位 HEX。預覽字級接受 12–96px 整數，文字與背景色也接受 3 或 6 位 HEX。這些是 v1 工具範圍，不是 CSS 限制。預覽字級或色彩無效時，只停用效果預覽；圖層有效仍可產生 CSS。

自訂對照文字最多 200 個 UTF-16 單位。超長文字不會截斷，而會停用視覺預覽；CSS 仍可產生，因為文字不屬於宣告。工具只輸出 text-shadow 宣告；預覽字級、文字色、背景色與範例文字都不會匯出。所有值只留在頁面記憶體，不上傳、不儲存，也不寫入網址。