首頁 > web前端 > css教學 > 手把手教你使用css3為文字加上陰影效果(程式碼詳解)

手把手教你使用css3為文字加上陰影效果(程式碼詳解)

奋力向前
發布: 2021-08-04 15:41:41
原創
3809 人瀏覽過

之前的文章《CSS篇:如何將頁面背景設定漸變效果(程式碼詳解)》中,跟大家介紹如何使用css設定背景色漸層。下面這篇文章跟大家介紹怎樣使用css3為文字添加陰影效果呢,我們一起看看怎麼做。

手把手教你使用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>
登入後複製

程式碼執行效果圖

手把手教你使用css3為文字加上陰影效果(程式碼詳解)

文字是沒有陰影效果的時候用<style>裡面寫法輸入程式碼如下:

手把手教你使用css3為文字加上陰影效果(程式碼詳解)

基本寫法程式碼範例

<style>
p{text-shadow: 5px 5px 5px #FF0000;}
</style>

<p>php中文网</p>
登入後複製

程式碼運行效果圖

手把手教你使用css3為文字加上陰影效果(程式碼詳解)

text -shadow的語法

手把手教你使用css3為文字加上陰影效果(程式碼詳解)

橫向偏移:指文字陰影相對文字本身的位置偏移多少。零為不偏移,與文字位置重合;正數為向右偏移;負數為向左偏移。

縱向偏移:與橫向偏移類似,只不過方向為縱向,即上下偏移。

羽化半徑:羽化半徑越小,則陰影就越銳利;羽化半徑越大,則陰影就越朦朧。

陰影顏色:指定陰影的顏色,可以是任何顏色。一般會用較深的顏色創造陰影效果,用較淺的顏色創造發光效果。

推薦學習:CSS影片教學

#

以上是手把手教你使用css3為文字加上陰影效果(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板