CSS伪元素 :before, :after, box-shadow应用

当我们在网页中使用CSS进行样式美化时，可能会遇到一些需要使用到CSS伪元素及box-shadow的情况。下面是对它们的详细解释及用法示例：

1. CSS伪元素

CSS伪元素是CSS中的一种元素，本身在DOM树中并不存在。它可以在一个已有的元素的前面或后面添加内容，或者为其设置属性并使其能够与其他内容分开样式。

:before

:before伪元素是在一个元素之前插入一些内容。这些内容在该元素内部的前面显示，并且需要设置content属性来指定要插入的内容。以下是一些:before伪元素的示例：

p:before {
  content: "Chapter: ";
  font-weight: bold;
}

以上代码将在所有<p>元素之前插入“Chapter: ”的文本，且其字体加粗。

:after

:after伪元素是在一个元素之后插入一些内容。这些内容在该元素内部的后面显示，并且需要设置content属性来指定要插入的内容。以下是一些:after伪元素的示例：

p:after {
  content: ".";
  font-size: 1.2em;
  color: red;
}

以上代码将在所有<p>元素之后插入一个红色的“.”号，并将其字号设置为1.2em。

2. box-shadow

box-shadow是CSS中用于为元素添加阴影效果的一个属性，它可以将一个独立的阴影附加在元素边框框线之外的区域。以下是一些box-shadow的示例：

.shadow {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.shadow:hover {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

以上代码为一个类名为.shadow的元素添加一个默认大小为2px的黑色阴影，并在其hover时将阴影大小增加至4px。

.shadow2 {
  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.2),
    5px 5px 10px rgba(0, 0, 0, 0.2);
}

以上代码为一个类名为.shadow2的元素添加一些渐变的阴影效果，左上方为渐变到白色的透明色，右下方为渐变到黑色的透明色。

希望这些攻略对你有所帮助！