CSS3的text-shadow字體陰影怎麼使用
- php中世界最好的语言原創
- 2017-11-24 09:27:302238瀏覽
CSS3的text-shadow樣式是設定文陰影效果，原本在CSS2中就有這個屬性，在CSS3中的文字陰影再次貝應用，那麼我們就來看一下需要如何使用text-shadow。
CSS3字：
text-shadow
語法結構
div{text-shadow:5px 2px 6px #000;}
#設定div盒子裡文字陰影效果距離左5px和距離上2px開始顯示陰影效果，同時陰影大小範圍為6px，陰影顏色為黑色（#000）。
文字顯示陰影效果共4個值，第一個代表距離左多少距離開始顯示陰影效果，第二個值代表距離上多少距離開始顯示陰影效果，第三個值代表陰影範圍大小，第四個值為陰影效果顏色。
案例HTML程式碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体阴影 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>我阴影文字</div> <div class="txt">文字阴影测试内容1</div> <div class="txt2">文字阴影测试内容2</div> </body> </html>
對應CSS程式碼：
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}以上就是CSS3的text-shadow使用方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是CSS3的text-shadow字體陰影怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn