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

Question

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

如您所见，某些条纹的厚度不一样，我想要这样的条纹分隔线，但是所有的分隔线都具有相同的“ font-weight”，我试图修复添加或删除的代码减少像素，但不起作用

这是代码：

.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>

Answer 2

如下面的示例所示（我已经添加了css缩放），线条的宽度确实相同。正如@Roy所说的，这只是一种错觉。

编辑：我注意到我没有为您提供可能的解决方案。如@Roy所指出的那样，可能的解决方案是重复图像。图像不必特别高品质，因此我认为它不会影响您的性能。

.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);
transform: scale(2.5);
}

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

Answer 3

这确实是一个渲染问题，至少在 Chrome 中是这样。
要解决此问题，您可以改用 linear-gradient 和 background-size：

.striped_divider {
    height: 20px;
    background-image: linear-gradient(-45deg,
    #cccccc 6.25%,
    #ffffff 6.25%,
    #ffffff 50%,
    #cccccc 50%,
    #cccccc 56.25%,
    #ffffff 56.25%,
    #ffffff 100%
  );
  background-size: 8px 8px;
}

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

我使用 https://stripesgenerator.com