站長資訊網
之前的文章《CSS篇：如何將頁面背景設置漸變效果（代碼詳解）》中，給大家介紹了怎樣使用css設置背景色漸變。下面本篇文章給大家介紹怎樣使用css3給文字添加陰影效果呢，我們一起看看怎么做。
用css3給文字添加陰影效果代碼示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字陰影</title> <style> h1 {text-shadow: 7px 10px 6px #FF0145;} p {text-shadow: 5px 5px 5px #FF0000;} p1 {text-shadow: 5px 5px 5px #FF4780;} </style> </head> <body> <h1>php中文網</h1> <p>php中文網</p> <p1>文字陰影</p1> </body> </html>
代碼運行效果圖
文字是沒有陰影效果的時候用<style>里面寫法輸入代碼如下：
基本寫法代碼示例
<style> p{text-shadow: 5px 5px 5px #FF0000;} </style> <p>php中文網</p>
代碼運行效果圖
text-shadow的語法
橫向偏移：指文字陰影相對文字本身的位置偏移多少。零為不偏移，與文字位置重合；正數為向右偏移；負數為向左偏移。
縱向偏移：與橫向偏移類似，只不過方向為縱向，即上下偏移。
羽化半徑：羽化半徑越小，則陰影就越銳利;羽化半徑越大，則陰影就越朦朧。
陰影顏色：指定陰影的顏色，可以是任何顏色。一般用較深的顏色創造陰影效果，用較淺的顏色創造發光效果。
推薦學習：CSS視頻教程
