如何使用 CSS 制作条纹效果

在 Web 开发中，条纹效果是常见的设计元素。在 CSS 中，我们可以使用伪元素和渐变来实现条纹效果。

使用伪元素实现条纹效果

我们可以使用 CSS 中的 ::before 或 ::after 伪元素来创建一个添加到元素之前或之后的伪元素，然后通过样式来设置伪元素的大小、位置以及样式，最终实现条纹效果。

HTML 结构

首先，我们需要为元素添加一个自定义类名。如下所示：

<div class="stripe">条纹效果</div>

CSS 样式

为了实现条纹效果，我们需要使用 CSS 代码设置 .stripe 元素及其伪元素的样式。代码如下：

.stripe {
  position: relative;
  padding: 10px;
  background-color: #f1f1f1;
}

.stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: #fff;
  z-index: -1;
}

.stripe::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background-color: #000;
  z-index: -1;
}

在上面的代码中，我们使用了绝对定位将 .stripe 元素相对定位，并在其前面和后面添加了两个绝对定位的伪元素。我们还使用了不同的背景颜色来实现条纹效果。

使用渐变实现条纹效果

除了使用伪元素外，我们还可以使用 CSS 渐变来实现条纹效果。在 CSS 中，我们可以使用 repeating-linear-gradient 属性来创建线性渐变，进而实现条纹效果。

HTML 结构

同样，我们需要为元素添加一个自定义类名。如下所示：

<div class="stripe-gradient">条纹效果</div>

CSS 样式

为了使用渐变实现条纹效果，我们需要使用 repeating-linear-gradient 属性来创建一个线性渐变，代码如下：

.stripe-gradient {
  padding: 10px;
  background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #000 10px, #000 20px);
}

在上面的代码中，我们创建了一个第一参数为 -45deg 的线性渐变，指定了渐变的方向。渐变的第二个参数是一个由四个颜色值组成的列表。

这个渐变重复着两个颜色值：#fff 和 #000，它们被分别间隔了 10px 和 20px。这就是为什么我们可以看到条纹效果。

结束语

通过使用伪元素和渐变，我们可以在 CSS 中很容易地实现条纹效果。相比而言，使用渐变似乎更容易设置，但它依赖于不同的浏览器设置。无论我们选择哪种方式，我们都可以轻松地创建出美观的条纹效果并为我们的网站增加一个新的视觉元素。