手把手教你使用css3為文字加上陰影效果（程式碼詳解）-css教學-PHP中文網

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

奋力向前

發布： 2021-08-04 15:41:41

原創

3746 人瀏覽過

在

之前的文章《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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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