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>

打印页面