跳到主要内容位置

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 个值,阴影水平方向上的偏移、垂直方向上的偏移、扩散程度和阴影颜色。