CSS Stripes，重复线性渐变错误答案

【问题标题】：CSS Stripes, repeating-linear-gradient bugCSS Stripes，重复线性渐变错误
【发布时间】：2018-08-31 08:46:13
【问题描述】：

我在 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);
}

&lt;div class="striped_divider"&gt;&lt;/div&gt;

【问题讨论】：

这和font-weight有什么关系？
所有行都相等，字体粗细没有问题。你所看到的（我们所看到的）是由线条的继承造成的错觉。要检查它们的权重是否相等，只需查看紧密按 ctrl + 即可缩放网页。
show 和 code 的输出都是一些
@Roy 这似乎不是错觉，至少我的浏览器确实画了一些“更粗”的线条
@Roy 这与视错觉无关。这是浏览器渲染问题。 Chrome 通常会使 1px 线条模糊，具体取决于它们的位置。

标签： css linear-gradients

【解决方案1】：

你什么都做不了，这就是我们在处理小的接近值时渲染渐变的方式（尤其是在谷歌浏览器中，在 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>

【讨论】：

使用倾斜的好技巧！！！。也许您应该增加间距以使其与未倾斜的相同。
@vals done ;) 为了准确，距离应该是 sqrt(2) * 初始距离

【解决方案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);
}

&lt;div class="striped_divider"&gt;&lt;/div&gt;

【讨论】：

更像是“浏览器低质量渲染”而不是“视错觉”，但你是对的。解决方案将是创建一个重复的图像以使其具有更高的质量

【解决方案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;
}

&lt;div class="striped_divider"&gt;&lt;/div&gt;

我使用https://stripesgenerator.com 制作了这个

【讨论】：