仅在 OS X 中倾斜背景线性渐变上的楼梯效果（锯齿状边缘）[重复]答案

【问题标题】：Staircase effect (jagged edges) on angled background linear-gradient only in OS X [duplicate]仅在 OS X 中倾斜背景线性渐变上的楼梯效果（锯齿状边缘）[重复]
【发布时间】：2016-10-26 09:46:33
【问题描述】：

这个屏幕是this live page的一部分。

我所做的只是制作一个带有线性渐变的背景，带有一个角度和两种颜色（大多数第二种颜色是透明的），根本没有渐变。

Windows 上不会出现此问题。它似乎只发生在我的 Mac OS X 浏览器上。（Mac OS X 10.11.6 上的 Chrome 53、Safari 9.1.2、Firefox 49、MBPr 15'' 2013 年末）

background: linear-gradient(7deg, @color1 50%, transparent 50%);

我不是在寻找一种完全不同的方法来实现斜线

我很好奇是否有什么办法可以摆脱 Mac OS X 浏览器中的 linear-gradient 楼梯。

【问题讨论】：

当使用带有硬停止的有角度的线性渐变时，已知会发生这种情况（不仅在 OS X 中，在其他系统中也是如此）。试试这里提到的方法 - stackoverflow.com/questions/33091401/…
嗯，.. 但这正是我不想要的。我需要那里的直线 - 剪辑路径解决方案是我以前的解决方案，但切换到剪辑路径的线性渐变背景不好支持。
使用稍微分开的颜色停止点不会破坏效果。不要使用linear-gradient(7deg, @color1 50%, transparent 50%)，而是尝试使用linear-gradient(7deg, @color1 49.9%, transparent 50.1%)。它应该更平滑（仍然不完美）并且应该仍然是一条线而不是楼梯效果。
我立即尝试了，但我正在寻找完美，通过这种微小的渐变，您会在边缘收到硬角。它真的不多，但并不完美:'( - 但我想我必须接受这是最好的。你为什么不在这个评论中做出回答，你指出另一个 SO -thread 以及您的 49.9 和 50.1 解决方案，我将其设置为答案。
我希望有人能帮助你，但据我所知，目前使用有角度的线性渐变无法达到完美。我没有发布答案，因为它与另一个解决方案太接近了，并且通过发布类似的答案看起来像是在寻找代表。我不应该这么说，但如果你觉得这有一点帮助，那么你可以投票赞成那个:)

标签： html css

【解决方案1】：

使用

.myclass { 背景颜色; /* 对于不支持渐变的浏览器 / 背景：-webkit-linear-gradient(7deg, @color1 50%, 透明 50%); / 对于 Safari 5.1 到 6.0 / 背景：-o-linear-gradient(7deg, @color1 50%, 透明 50%); //对于 Opera 11.1 到 12.0 / 背景：-moz-linear-gradient（7deg，@color1 50%，透明 50%）； / 对于 Firefox 3.6 到 15 / 背景：线性渐变（7度，@color1 50%，透明 50%）； / 标准语法 */ }

【讨论】：

除了@color1 之外，我看不出与我所做的任何不同 - 并且由于currentColor 而不会出现问题 - 下次请解释您的解决方案，并可能正确发布代码。