.jpg)
text-shadow是css屬性，用于給文字添加陰影效果?；菊Z法為text-shadow: 水平偏移量 垂直偏移量 模糊半徑 陰影顏色;，例如2px 2px 4px rgba(0,0,0,0.5)；常見應(yīng)用場景包括增強(qiáng)對比度、復(fù)古/立體風(fēng)格和多個(gè)陰影疊加模擬霓虹燈效果；注意事項(xiàng)有避免過度模糊、合理設(shè)置多層陰影順序、使用rgba顏色提升柔和度，并需測試移動端顯示效果及排查選擇器錯(cuò)誤、顏色相近或瀏覽器兼容性問題。合理使用text-shadow能提升頁面質(zhì)感，但應(yīng)避免濫用導(dǎo)致雜亂。
在網(wǎng)頁設(shè)計(jì)中，文字陰影（text-shadow）是一個(gè)很實(shí)用的效果，能讓文字更有層次感或者提升可讀性。html本身不支持直接設(shè)置文字陰影，但通過css的text-shadow屬性，可以輕松實(shí)現(xiàn)這一效果。
基本語法與使用方式
text-shadow是CSS中的一個(gè)屬性，用于給文字添加陰影效果。它的基本格式如下：
text-shadow: 水平偏移量 垂直偏移量 模糊半徑 陰影顏色;
- 水平偏移量：陰影向右或左移動的距離（正為右，負(fù)為左）
- 垂直偏移量：陰影向下或上移動的距離（正為下，負(fù)為上）
- 模糊半徑（可選）：值越大，邊緣越模糊，默認(rèn)為0時(shí)沒有模糊
- 陰影顏色（可選）：默認(rèn)為當(dāng)前文字顏色
例如：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
這個(gè)例子會讓標(biāo)題文字有一個(gè)向右下方偏移、略帶模糊的黑色陰影。
常見應(yīng)用場景與建議
文字陰影并不是隨便加一個(gè)就能好看，得根據(jù)整體風(fēng)格來調(diào)整。以下是幾個(gè)常見場景和使用建議：
- 增強(qiáng)對比度：背景復(fù)雜或圖片上顯示文字時(shí)，加個(gè)淺色或深色的陰影能提高可讀性。
- 復(fù)古/立體風(fēng)格：適當(dāng)使用大偏移+低透明度的陰影，可以營造出老式海報(bào)或浮雕效果。
- 多個(gè)陰影疊加：用逗號分隔可以添加多個(gè)陰影，比如模擬霓虹燈字效。
舉個(gè)例子：
.title { text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff; }
這樣會同時(shí)出現(xiàn)兩個(gè)方向的陰影，形成一種立體邊框的感覺。
注意事項(xiàng)與常見問題
雖然text-shadow使用簡單，但還是有幾個(gè)細(xì)節(jié)需要注意：
- 不要過度使用模糊半徑，否則會影響閱讀體驗(yàn)
- 多層陰影疊加時(shí)注意順序，前面的陰影會被后面的覆蓋
- 使用rgba()顏色可以讓陰影更柔和自然，而不是生硬的黑白色
- 移動端顯示效果可能略有不同，最好做適配測試
如果你發(fā)現(xiàn)陰影沒生效，檢查一下是不是以下原因：
- css選擇器寫錯(cuò)了，樣式?jīng)]應(yīng)用到目標(biāo)文字
- 文字顏色和陰影顏色太接近，看不出區(qū)別
- 瀏覽器兼容性問題（現(xiàn)代瀏覽器都支持，IE9及以上也沒問題）
基本上就這些。合理使用text-shadow可以讓頁面看起來更有質(zhì)感，但別濫用，不然反而顯得雜亂。
.png)
