首頁 > 文章 > web前端 > 如何使用 CSS 在文字上套用陰影效果？

如何使用 CSS 在文字上套用陰影效果？

王林轉載: 2023-08-23 23:17:091115瀏覽

如何使用 CSS 在文本上应用阴影效果？

我們可以使用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

Example 1

在這個範例中，我們將在一個「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>

Example 2

在這個範例中，我們將在一個「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中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS圖片精靈的作用下一篇：CSS圖片精靈的作用

看更多