在线观看av日韩,在线观看av的网址,日本久久久精品视频

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的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屬性設置

水平偏移量，正值向右，負值向左。
垂直偏移量，正值向下，負值向上。
模糊度，不能為負值。
陰影的顏色。
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>

實現效果如圖所示

微信截圖_20180926163005.png

使用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>

實現效果如圖所示

微信截圖_20180926163409.png

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

以上就是如何使用css3實現文字的單陰影效果和多重陰影效果（附完整代碼）的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

如何使用css3完成文字的單陰影效果與多重陰影效果（附完整代碼）

本類教程下載

系統下載排行