CSS - text-shadow 屬性

text-shadow 屬性用於為文字新增陰影效果。它允許您指定陰影的顏色、偏移量、模糊半徑和擴充套件半徑。

可能的值

<color>:
- 設定陰影的顏色。
- 它是可選的。
- 它可以在偏移值之前或之後指定。
- 可以指定任何顏色值，例如名稱、十六進位制或 RGB 值。
<offset-x><offset-y>:
- 任何長度值，指定 x 和 y 值。
- x 值表示陰影相對於文字的水平距離。
- y 值表示陰影相對於文字的垂直距離。
- 如果 x 和 y 值都等於 0，則陰影顯示在文字後面。
<blur-radius>
- 任何長度值，指定模糊半徑的值。
- 它是可選的。
- 要使模糊看起來更大，您需要提供更高的值。
- 如果未傳遞任何值，則將其視為 0。

應用於

所有 HTML 元素。

DOM 語法

object.style.textShadow = "5px 5px 3px red";

前兩個 (5px,5px) 值指定陰影偏移的長度，即 X 座標和 Y 座標。
第三個值 (3px) 指定模糊半徑。
最後一個值 (red) 描述陰影的顏色。

CSS text-shadow - 簡單陰影效果

以下示例演示瞭如何設定文本週圍的陰影。這可能不受所有瀏覽器的支援：

<html>
<head>
</head>
<body>
   <h2>Text Shadow</h2>
      <p style="text-shadow: 5px 5px 3px yellow;">Text shadow</p>
      <p style="text-shadow: 10px 5px #00ffff;">Text shadow</p>
      <p style="text-shadow: blue 0px 0px 2px">Text shadow</p>
      <p style="text-shadow: rgb(26, 69, 105) 0px 0px 10px">Text shadow</p>
</body>
</html>

列印頁面