如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）-css教學-PHP中文網

首頁

web前端

css教學

如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）

坏嘻嘻

Sep 28, 2018 am 11:54 AM

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屬性設定

##水平偏移量，正值向右，負值向左。垂直偏移量，正值向下，負值向上。

模糊度，不能為負值。

陰影的顏色。如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）

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

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

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

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

以上是如何使用css3實現文字的單陰影效果和多重陰影效果（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn