HTML div 条纹状 CSS 样式 - 简单易懂的实现方法

下面是一个简单的 HTML div 条纹状的 CSS 样式：

HTML 代码：

<div class='stripe'></div>

CSS 代码：

.stripe {
  width: 100%;
  height: 50px;
  background-color: #fff;
  background-image: linear-gradient(90deg, #fff 50%, #ccc 50%);
  background-size: 10px 10px;
}

解释：

• `width: 100%;` 设置 div 的宽度为父元素的宽度。
• `height: 50px;` 设置 div 的高度为 50 像素。
• `background-color: #fff;` 设置 div 的背景颜色为白色。
• `background-image: linear-gradient(90deg, #fff 50%, #ccc 50%);` 设置 div 的背景图像为一个水平方向的线性渐变。渐变的起点是白色，终点是灰色。这个渐变会在 div 的中间位置产生一个垂直方向的分界线。
• `background-size: 10px 10px;` 设置渐变图像中每个条纹的宽度和高度为 10 像素。