CSS 设置文字阴影

CSS 支持对文字设置阴影，对字体起到一定的装饰作用，并且可以吸引用户的关注。CSS 给文字设置阴影使用 text-shadow 属性，它有 4 个值，分别是：

• x-offset: 阴影水平方向上的偏移。
• y-offset: 阴影垂直方向上的偏移。
• blur：阴影的模糊程度。
• color: 阴影的颜色。

例如我们设置：

text-shadow: 1px 1px 1px #ccc;

它的意思是：阴影在水平方向上向右偏移 1px，垂直方向上向下偏移 1px，模糊程度为 1px，阴影的颜色为 #ccc。

text-shadow 示例

我们来看一个例子，假如要设置文本的阴影在水平方向上向右偏移 4px、垂直向下偏移 4px、扩散程度 8px、颜色为 hsl(220deg, 100%, 80%)，可以使用下方的代码：

<style>
  body {
    background: hsl(0deg, 0%, 5%);
  }

  p {
    color: hsl(220deg, 100%, 70%);
    text-shadow: 4px 4px 8px hsl(220deg, 100%, 80%)
  }
</style>
<p>这是一段有阴影的文本</p>

预览：

代码里设置了页面背景为黑色，方便看到文字的阴影，可以看到这段文字显示出了阴影。

小结

本小节介绍了 CSS text-shadow 属性，它用于设置 CSS 文本阴影，分别有 4 个值，阴影水平方向上的偏移、垂直方向上的偏移、扩散程度和阴影颜色。