CSS3文字特效屬性text-shadow怎么用

發(fā)布時(shí)間：2022-03-02 09:47:47 來(lái)源：億速云閱讀：197 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下CSS3文字特效屬性text-shadow怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　一、text-shadow的寫(xiě)法

　　text-shadow是CSS3樣式屬性，是設(shè)置文本的文字字體是否有陰影及模糊效果的CSS樣式。

　　語(yǔ)法：text-shadow:x-offsety-offsetblurcolor

　　text-shadow的參數(shù)如下：

　　x-offset:必需，水平方向陰影偏移量，可為負(fù)值

　　y-offset:必需，垂直方向上陰影偏移量，可為負(fù)值

　　blur:可選,陰影模糊半徑，不可為負(fù)值

　　color:可選，陰影顏色

　　二、text-shadow的簡(jiǎn)單使用方法

　　舉例：設(shè)置類(lèi)名為a1的div內(nèi)文字陰影紅色，陰影分別距離左和上為3px和4px，陰影大小模糊范圍為5px，設(shè)置類(lèi)名為a2的div內(nèi)文字陰影黑色，陰影分別距離左和上為1px，陰影范圍大小2px.

　　html代碼：

　　<div>生活不止眼前的茍且</div>

　　<divclass="a1">生活不止眼前的茍且</div>

　　<divclass="a2">生活不止眼前的茍且</div>

　　CSS代碼：

　　.a1{text-shadow:3px4px5px#F00}

　　.a2{text-shadow:1px1px2px#000}

　　圖片展示：

　　text-shadow2.jpg

　　三、CSS3文字陰影實(shí)例

　　描述：用CSS3中的text-shadow給文字添加類(lèi)似火焰的效果。

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<styletype="text/css">

　　.a1{width:200px;height:200px;background:#000000;text-align:center;line-height:200px;font-size:40px;font-weight:bold;

　　text-shadow:004pxwhite,

　　0-5px4px#ff3,

　　3px-10px6px#fd3,

　　-3px-15px11px#C90,

　　3px-25px18px#f20;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="a1">延禧攻略</div>

　　</body>

　　</html>

CSS3文字特效屬性text-shadow怎么用

看完了這篇文章，相信你對(duì)“CSS3文字特效屬性text-shadow怎么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡