|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 最近幾年在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屬性設置
使用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中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!