站長(zhǎng)資訊網(wǎng)
之前的文章《CSS篇：如何將頁面背景設(shè)置漸變效果（代碼詳解）》中，給大家介紹了怎樣使用css設(shè)置背景色漸變。下面本篇文章給大家介紹怎樣使用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中文網(wǎng)</h1> <p>php中文網(wǎng)</p> <p1>文字陰影</p1> </body> </html>
代碼運(yùn)行效果圖
文字是沒有陰影效果的時(shí)候用<style>里面寫法輸入代碼如下：
基本寫法代碼示例
<style> p{text-shadow: 5px 5px 5px #FF0000;} </style> <p>php中文網(wǎng)</p>
代碼運(yùn)行效果圖
text-shadow的語法
橫向偏移：指文字陰影相對(duì)文字本身的位置偏移多少。零為不偏移，與文字位置重合；正數(shù)為向右偏移；負(fù)數(shù)為向左偏移。
縱向偏移：與橫向偏移類似，只不過方向?yàn)榭v向，即上下偏移。
羽化半徑：羽化半徑越小，則陰影就越銳利;羽化半徑越大，則陰影就越朦朧。
陰影顏色：指定陰影的顏色，可以是任何顏色。一般用較深的顏色創(chuàng)造陰影效果，用較淺的顏色創(chuàng)造發(fā)光效果。
推薦學(xué)習(xí)：CSS視頻教程
