Css 简明教程

CSS - text-shadow Property

text-shadow 属性用于向文本添加阴影效果。它允许您指定阴影的颜色、偏移量、模糊半径和扩展半径。

Possible Values

  1. * <color>* ：设置阴影颜色。它是可选的。它可以在偏移值之前或之后指定。可以指定任何颜色值，例如名称、十六进制或 RGB 值。

  2. <offset-x><offset-y> ：任何长度值，指定 x 和 y 值。x 值表示阴影与文本的水平距离。y 值表示阴影与文本的垂直距离。如果 x 和 y 值等于 0，阴影将出现在文本后面。

  3. <blur-radius> 任何长度值，指定模糊半径的值。它是可选的。为了使模糊看起来更大，您需要提供更高的值。如果未传递值，则将其视为 0。

Applies to

所有 HTML 元素。

DOM Syntax

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

  1. 前两个 (5px,5px) 值指定阴影偏移量的长度，即 X 坐标和 Y 坐标。

  2. 第三个值 (3px) 指定模糊半径。

  3. 最后一个值 (red) 描述了阴影的颜色。

CSS text-shadow - Simple Shadow Effects

以下是演示如何在文本周围设置阴影的示例。并非所有浏览器都支持此功能 −

<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>