在 Apple 设备/Safari 上的边框上生成线性渐变答案

【问题标题】：Linear gradient generating on border on Apple devices / Safari在 Apple 设备/Safari 上的边框上生成线性渐变
【发布时间】：2019-09-17 12:29:05
【问题描述】：

我有以下标记：

.hero{
  padding: 100px;
  background: lightgrey;
  border: 1px solid black;
}

.gradient{
  background: linear-gradient(195deg, transparent 31%, #FFFFFF 31.2%), linear-gradient(90deg, #79CAF0 0%, #79CAF0 100%);
}

&lt;div class="hero gradient"&gt;&lt;/div&gt;

在 Chrome、Firefox 等设备上渲染效果很好。但是，在 Safari 或运行 Mac OS 的设备上，渲染的边框很细（但很明显）。像这样：

注意到渐变底部的那条线了吗？为什么会这样？

【问题讨论】：

为什么要使用两个渐变？你在底层有一个纯色所以简单地把它而不是透明的，你就会有一个渐变

标签： html css linear-gradients

【解决方案1】：

将第一个渐变的最后一个值从 31.2% 更改为 31%，线条应该会消失。

【讨论】：

如果我这样做，渐变不会平滑，请参见此处：jsfiddle.net/15La803n
嗯...似乎没有其他方法可以平滑您的倾斜渐变。但是，您可以尝试其他选项，例如 svgs 或像 Stripe 在他们的网站上所做的那样转换倾斜：stripe.com

【解决方案2】：

我认为在某些角度和颜色组合下使用linear-gradient 是无法避免这种情况的。过去我自己也遇到过这种情况，不得不改用 SVG。让我知道您是否想要一个如何做到这一点的示例。

仅供参考，您可以简单地使用 CSS 来使用单个线性渐变：

.hero{
  padding: 100px;
  background: lightgrey;
  border: 1px solid black;
}

.gradient{
  background: linear-gradient(195deg, #79CAF0 31%, transparent 31%);
}

&lt;div class="hero gradient"&gt;&lt;/div&gt;

【讨论】：