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

Question

我正在尝试使用 repeating-linear-gradient在具有 1px 宽线的边框上，每条线之间的间距为 6px。

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

JSFiddle

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

Answer 1

基于 this CSS Tricks article by Ana在 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>

下面是 OS X 上 Firefox 的屏幕截图(感谢 web-tiki 提供屏幕截图)。