如何使用 CSS 为文本添加阴影？

在网页设计中，为文本添加阴影可以改善页面的美观度，使文本更加突出。下面是几种使用 CSS 为文本添加阴影的方法：

1. text-shadow 属性

在 CSS3 中，我们可以使用 text-shadow 属性为文本添加阴影。text-shadow 属性由三个值组成，分别是阴影的 x 坐标、y 坐标和模糊半径。例如：

p {
  text-shadow: 1px 1px 2px black;
}

这会在 p 元素内的文本下方添加一个 1 像素的 x 坐标位移、1 像素的 y 坐标位移、2 像素的模糊半径、颜色为黑色的阴影。

text-shadow 属性还可以使用多个阴影，如下：

p {
  text-shadow: 1px 1px 2px black, -1px -1px 2px white;
}

这会在 p 元素内的文本下方添加两个阴影，分别为黑色和白色。

2. box-shadow 属性

如果你想要为整个文本块添加阴影，而不仅仅是文本，那么可以使用 box-shadow 属性。box-shadow 属性由四个值组成，分别是水平位移、垂直位移、模糊半径和扩展半径。例如：

p {
  box-shadow: 1px 1px 2px black;
}

这会在 p 元素周围添加 1 像素的 x 坐标位移、1 像素的 y 坐标位移、2 像素的模糊半径、没有扩展半径、颜色为黑色的阴影。

3. ::after 伪元素

你也可以使用 CSS 中的 ::after 伪元素为文本添加阴影。这个方法需要在文本块内嵌套一个子元素，再使用 ::after 伪元素为该子元素添加阴影。例如：

p {
  position: relative;
}

p::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 2px black;
}

首先，我们将 p 元素的定位设置为相对定位，然后我们为该元素的 ::after 伪元素设置阴影。伪元素需要使用位置定位来和文本块对齐。然后我们使用宽度和高度设置 ::after 伪元素的尺寸，然后通过 box-shadow 属性给伪元素设置阴影。

总结

这些是使用 CSS 为文本添加阴影的三种方法。你可以根据自己的需要选择其中的一种或几种方法，来实现让文本更加突出的效果。