如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）
- 坏嘻嘻原創
- 2018-09-28 11:54:084904瀏覽
近年來在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實作字體內發光效果（詳解）
<!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>######實作效果如圖所示####### ###########總結：text-shadow屬性不僅可以使文字具有陰影效果，如果用逗號隔開設定的話還可以做出多重陰影的效果，在平時前端開發的過程中很實用，接下來我會在後面的文章向大家展示如何為圖片添加陰影效果、如何使用text-shadow屬性做出發光文字的效果等，敬請期待您的關注。 ###以上是如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn