首頁 > web前端 > css教學 > 如何使用css3實現文字的單陰影效果和多重陰影效果(附完整程式碼)

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

坏嘻嘻
發布: 2018-09-28 11:54:08
原創
5056 人瀏覽過

近年來在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實作文字的單一陰影############

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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
運行沒效果
來自於 1970-01-01 08:00:00
0
0
0
objective-c - 毛玻璃在真機上沒有效果
來自於 1970-01-01 08:00:00
0
0
0
為什麼DOM的div輸出會影響結果?
來自於 1970-01-01 08:00:00
0
0
0
angular.js - angularJs的loading效果
來自於 1970-01-01 08:00:00
0
0
0
使用純Javascript實現影像替換的過渡效果
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板