CSS 属性

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）指定模糊半径。

  • 最后一个值（红色）描述阴影的颜色。

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>