科技知識動態：如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼）

2021-05-18 19:54:37

導讀跟大家講解下有關如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴

跟大家講解下有關如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼），小編也收集到了有關如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼）的相關資料，希望大家看到了會喜歡。

最近幾年在web網頁開發的過程中越來越在意人機交互和用戶體驗，不僅顏色更加的多樣化，而且各種特殊效果也是讓人目不暇接。今天主要向大家介紹一下在文本里如何實現陰影的特殊效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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

text-shadow屬性設置

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

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

模糊度，不能為負值。

陰影的顏色。

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

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

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

<!DOCTYPE html><html><head> <title>單個陰影</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> ul>li:nth-child(odd) { text-shadow: 2px 2px 1px red; } </style></head><body> <ul> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> </ul></body></html>

實現效果如圖所示

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

<!DOCTYPE html><html><head> <title>多個陰影</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> ul>li:nth-child(odd) { text-shadow: 2px 2px 1px red, 10px 2px 1px blue; } </style></head><body> <ul> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> </ul></body></html>

實現效果如圖所示