css - 如何使用重复线性渐变在对角线边框中保持线宽相同？

Question

我正在尝试在每条线之间的间距很宽的边框上使用重复线性渐变。1px6px

有人能告诉我我做错了什么，所以当它们重复时线条的宽度不一样？我试过调整像素值，但它们永远不匹配。

JSFiddle

background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);

Answer 1

根据Ana 的这篇 CSS Tricks 文章，浏览器在repeating-linear-gradient. 文章末尾有比较屏幕截图，突出显示了在 Windows 上的 Firefox 中渲染是如何正确的，但在 Windows 上的 Chrome 和 OS X 上的 Firefox 中却不是这样。

解决方案：

似乎设置了一种解决方案background-size并使两个笔画成为渐变的一部分（与只有一个笔画的问题代码不同）。背景大小的计算方法是最后一个颜色停止点 (14px) 除以 2 的平方根（大约变为 10px）。

该background-size设置是强制性的，因为没有它在 Opera、Chrome 中不起作用。它似乎确实使这条线有点粗，但它至少似乎比以前更好。

这适用于 Chrome、Opera、Edge、IE11、Windows 上的 Firefox 和 OS X 上的 Firefox。

.border {
  background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
  background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
  height: 50px;
}

<div class="border"></div>

下面是 Firefox 在 OS X 上的屏幕截图（感谢 web-tiki 的屏幕截图）。