使用css3實現文本陰影效果的原理

實現陰影效果主要是用text-shadow屬性，根據W3C標準，如果我們想要在IE下兼容CSS3的陰影屬性可以使用ie.css3-htc，不過按照標準InternetExplorer9以及更早版本的瀏覽器暫時不支持text-shadow屬性。最基本的語法為：text-shadow:h-shadowv-shadowblurcolor;

text-shadow屬性設置

水平偏移量，正值向右，負值向左。

垂直偏移量，正值向下，負值向上。

模糊度，不能為負值。

陰影的顏色。

text-shadow屬性還有另外一種特性：實現文本發光效果。詳情請參考本站其他文章：

如何使用css3實現字體內發光效果(詳解)

使用css3實現文本的單個陰影

單個陰影

ul>li:nth-child(odd){

text-shadow:2px2px1pxred;

}

• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網

實現效果如圖所示

使用css3實現文本的多重陰影

多個陰影

ul>li:nth-child(odd){

text-shadow:2px2px1pxred,10px2px1pxblue;

}

• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網
• PHP中文網

實現效果如圖所示

總結：text-shadow屬性不僅僅可以使文字具有陰影效果，如果用逗號隔開設置的話還可以做出多重陰影的效果，在平時前端開發的過程中很實用，接下來我會在后面的文章向大家展示如何給圖片添加陰影效果、如何使用text-shadow屬性做出發光文字的效果等，敬請期待您的關注。

本文轉載自中文網

總結

以上是生活随笔為你收集整理的php阴影效果,如何使用css3实现文字的单阴影效果和多重阴影效果（的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。