我正在尝试使用 repeating-linear-gradient在具有 1px
宽线的边框上,每条线之间的间距为 6px
。
有人可以告诉我我做错了什么,所以重复时线条的宽度不一样吗?我试过调整像素值,但它们始终不匹配。
background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);
最佳答案
基于 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 提供屏幕截图)。
关于css - 如何使用重复线性渐变在对 Angular 线边框中保持线宽相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37378676/