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 像素