CSS 条纹，重复线性渐变错误

Question

我在 CSS 中有一个条纹分隔线，带有重复的线性渐变，但它正在做一些奇怪的事情，这是一张图片：

正如你所看到的，一些条纹的粗细不一样，我想要这样的条纹分隔线，但都具有相同的“字体粗细”，我试图修复添加或减少像素的代码，但不工作

这是代码：

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
}

<div class="striped_divider"></div>

Answer 1

你什么也做不了，这就是当我们处理小的接近值时渐变的渲染方式（特别是在 Google Chrome 中，在 Fiferfox 中应该更好）。

增加数值，你会发现效果会慢慢消失：

.striped_divider0 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

.striped_divider {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px);
}

.striped_divider1 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px);
}
.striped_divider2 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px);
}

<div class="striped_divider0"></div>
<div class="striped_divider"></div>
<div class="striped_divider1"></div>
<div class="striped_divider2"></div>

您可以尝试倾斜变换，它应该会给出更好的结果：

.striped_divider {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px);
  transform: skew(-45deg);
}

.striped_divider1 {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

<div class="striped_divider"></div>
<div class="striped_divider1"></div>