近年來在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實作文字的單一陰影############
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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實作文字的多重陰影#########
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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中文網其他相關文章!