CSS 在文本下方添加阴影

在网页设计中，添加阴影是一种常见的美化效果。本文将介绍如何在文本下方添加阴影效果，来增强阅读体验。

1. text-shadow 属性

在 CSS 中，使用 text-shadow 属性来添加文本阴影。该属性接受四个参数，分别代表阴影的位置、模糊度、颜色和透明度。

text-shadow: h-shadow v-shadow blur color;

• h-shadow：表示水平方向的阴影位置。可以为正值，表示向右偏移，也可以为负值，表示向左偏移。

• v-shadow：表示垂直方向的阴影位置。可以为正值，表示向下偏移，也可以为负值，表示向上偏移。

• blur：表示阴影的模糊程度。

  • 如果该值为 0，则没有模糊效果。
  • 如果该值为正数，则阴影将变得更模糊。
  • 如果该值为负数，则阴影将变得更尖锐。

• color：表示阴影的颜色。可以是任何 CSS 颜色值。

• opacity：表示阴影的透明度。取值范围为 0 ~ 1，其中 0 表示完全透明，1 表示完全不透明。

下面是一个例子，演示如何为文本添加一个黑色阴影：

h1 {
  text-shadow: 0px 2px 4px black;
}

该样式将会为 <h1> 标签添加一个黑色阴影，阴影位于文本下方。

2. 实现不同的阴影效果

除了基本的阴影效果之外，我们还可以通过调整 text-shadow 属性的参数来实现不同的阴影效果。

2.1 多个阴影

如果我们希望为文本添加多个阴影，可以在 text-shadow 属性中使用逗号分隔不同的阴影参数。

h1 {
  text-shadow: 0px 2px 4px black, 0px 4px 8px gray;
}

该样式将会为 <h1> 标签添加两个阴影，一个黑色的阴影和一个灰色的阴影。

2.2 内阴影

如果我们希望在文本内部添加阴影，需要将水平和垂直方向的偏移值设置为 0，然后将模糊度调整到合适的值即可。

h1 {
  text-shadow: 0px 0px 4px black;
}

该样式将会为 <h1> 标签添加一个黑色的内阴影。

2.3 深色背景下的阴影

在深色背景下，黑色阴影可能不太明显。为了让阴影更加明显，可以调整阴影颜色的透明度，让阴影变得更加半透明。

h1 {
  text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

该样式将会为 <h1> 标签添加一个半透明的黑色阴影。

3. 总结

通过使用 text-shadow 属性，我们可以为文本添加阴影效果，来增强阅读体验。除了基本的阴影效果之外，我们还可以通过调整参数来实现不同的阴影效果。

参考资料：

• CSS text-shadow 属性