我們可以使用CSS提供的「text-shadow」屬性在文字元素上套用陰影效果。 「text-shadow」屬性接受一個值列表，表示陰影相對於元素的X和Y偏移量，陰影的模糊半徑以及陰影的顏色。這些值在下面的語法中列出 -
text-shadow: offset_y offset_x blur-radius color
以下是值及其意義的清單 -
Offset-x − 它表示陰影在水平方向上與元素的距離
Offset-y − It represents the distance of the shadow from the element in the vertical direction
模糊半徑 − 它表示陰影的不透明度
Color − It represents the color of the shadow
在這個範例中，我們將在一個「h3」元素上套用陰影效果，並給陰影一個y偏移以及紅色
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 0 15px 0 red;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
在這個範例中，我們將在一個「h3」元素上套用陰影效果，並給陰影一個y偏移、x偏移、透明度和綠色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 10px 15px 5px green;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
在本文中，我們學習了「text-shadow」屬性，並使用CSS將陰影效果應用於文字元素，透過2個不同的範例進行了示範。在第一個範例中，我們應用了一個垂直陰影效果，顏色為“紅色”，而在第二個範例中，我們應用了一個垂直和一個水平陰影效果，顏色為“綠色”，模糊半徑為5px 。
以上是如何使用 CSS 在文字上套用陰影效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
