CSS是前端开发中常用的一种技术，可以用它来美化网站的样式。在CSS中，我们可以使用众多属性来调整元素的样式，比如颜色、大小、形状等。而在这些 CSS 属性中，有一种特殊的用法，可以帮助我们画出纵横交错的交叉线，这种方法被称为“伪元素”。

.box {position: relative;width: 200px;height: 200px;border: 1px solid #333;}.box::before,.box::after {content: "";position: absolute;width: 100%;height: 100%;background: linear-gradient(45deg, #f00 50%, transparent 50%);z-index: -1;}.box::before {top: 0;right: 0;transform: scaleX(-1);}.box::after {bottom: 0;left: 0;transform: scaleY(-1);}

上述代码中，我们首先创建了一个名为 .box 的容器元素，并设置了它的宽度、高度和边框等样式。接着，我们使用了 CSS 伪元素 ::before 和 ::after 来插入两个空元素，并将它们的 content 属性设置为空字符串，这样它们就不会显示出来。接着，我们为这两个空元素设置了绝对定位，并将它们的宽度和高度都设置为100%。这样一来，它们就会覆盖整个 .box 容器。

接下来，我们使用了 CSS 的线性渐变 background 属性来设置这两个空元素的背景色。此处我们使用了一个 45 度角度的线性渐变，以实现纵横交错的效果。其中，我们将颜色50%处设为红色，而另外一半则为透明。

最后，我们对这两个空元素分别使用了 scaleX 和 scaleY 转换属性，使它们分别沿着 x 方向和 y 方向上做了镜像翻转，以实现纵横交错的效果。通过这样的代码，我们就可以轻松实现一个美观的交叉线效果。