當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

CSS3---6.文字阴影

發布時間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3---6.文字阴影小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

text-shadow還沒有出現時，大家在網頁設計中陰影一般都是用photoshop做成圖片，現在有了css3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用，產生陰影和模糊主體。這樣在不使用圖片時能給文字增加質感

1.語法：
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是：
text-shadow:[顏色(Color)  x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]...
或者
text-shadow:[x軸(X Offset) y軸(Y Offset)  模糊半徑(Blur)  顏色(Color)],[x軸(X Offset) y軸(Y Offset)  模糊半徑(Blur)  顏色(Color)]...
2.取值：
a)<length>：長度值，可以是負值。用來指定陰影的延伸距離。其中X Offset是水平偏移值，Y Offset是垂直偏移值
b)<shadow>：陰影的模糊值，不可以是負值，用來指定模糊效果的作用距離
c)<color>：指定陰影顏色，也可以是rgba透明色。
d)圖示：3.說明：
可以給一個對象應用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示陰影的水平偏移距離，其值為正值時陰影向右偏移，如果其值為負值時，陰影向左偏移；Y-Offset是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移反之其值是負值時陰影向頂部偏移；Blur是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0；Color是指陰影的顏色，其可以使用rgba色

<style>.demo{margin: 50px auto;text-align: center;font-size: 80px;font-weight: bolder;color: lightblue;}/*側陰影效果*/.demo1{text-shadow: 2px 2px 2px #ff0000;}/*輝光效果*/.demo2{text-shadow: 0 0 30px red;}/*多層輝光效果*/.demo3{text-shadow:0 0 5px #fff,0 0 15px #fff,0 0 40px #fff ,0 0 70px red ;}/*蘋果經典效果*/.demo4{color: black;text-shadow: 0 1px 1px #fff;}/*浮雕效果*/.demo5{color: #ccc;text-shadow: -1px -1px 0px #fff,-2px -2px 0px #eee,1px 1px 0px #444,2px 2px 0px #333;}/*模糊字效果*/.demo6{color: transparent; /*將本身設置為透明*/text-shadow: 0 0 6px #ff9966;}</style>
<body><div class="demo">程序員</div><div class="demo demo1">程序員  側陰影效果</div><div class="demo demo2">程序員    輝光效果</div><div class="demo demo3">程序員    多層輝光效果</div><div class="demo demo4">程序員    蘋果經典特效</div><div class="demo demo5">程序員    浮雕效果</div><div class="demo demo6">程序員    模糊字效果</div>
</body>

轉載于:https://www.cnblogs.com/Tobenew/p/10525548.html

總結

以上是生活随笔為你收集整理的CSS3---6.文字阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。