如何使径向渐变在 Safari 中起作用？

Posted 2023-03-06

【中文标题】如何使径向渐变在 Safari 中起作用？

【英文标题】：How to make radial gradients work in Safari?

【发布时间】：2019-06-10 10:28:34

【问题描述】：

我在我正在构建的新网站上使用径向渐变，但在桌面上的 Safari 中呈现的颜色不同（更暗）。有没有更好的跨浏览器语法可以使用？

我尝试了不同的前缀，但这并没有解决问题。我正在使用的代码如下。

.item1 
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;

当前在 Chrome 和 Firefox 中看到的正确输出：https://imgur.com/a/fMJCbZE

Safari 中的输出：https://imgur.com/a/KwwiV1b

正如您所见，它在 Safari 中要暗得多。

有人对如何解决这个问题有任何想法吗？

【问题讨论】：

我认为您可以从简化代码开始，如下所示：jsfiddle.net/7rL0d5f4 .. 您不需要所有这些

我认为这是同样的问题试试这个：https://***.com/a/5840904/10811862

感谢@TemaniAfif 是的，代码确实看起来过于复杂。我通过自动前缀运行它并添加了额外的行。感谢您的提琴，但如果您在 Safari 和 Chrome 中检查它仍然存在相同的问题。

@JanilsonDuarte 问题是 7 岁...

@Neal 实际上我无法使用 safari 进行测试，但可能 farthest-side/ farthest-corner 处理得不好。这个呢：jsfiddle.net/7rL0d5f4/1？不完全一样，但如果在 Safari 上运行，你可以调整百分比来获得你想要的

【参考方案1】：

首先，您的渐变可以简化如下。

.box
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), 
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
 height:200px;


body 
 background:blue;

<div class="box">

</div>

现在的问题是 safari 不支持 at 使用的语法，正如您在 MDN page 中看到的那样：

您可以更改语法，如下所示。我将分割渐变以更好地查看结果，然后您可以轻松地将它们组合起来。

第一个渐变：

.box
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), red);
 height:200px;


.box2
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5), red) top right/200% 200%;
 height:200px;

<div class="box">

</div>
<div class="box2">

</div>

第二个渐变

.box
 background:  
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), red 300px);
 height:200px;


.box2
 background:  
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), red 300px) top left/200% 200%;
 height:200px;

<div class="box">

</div>
<div class="box2">

</div>

诀窍是，如果您删除at，渐变默认从中心开始，当从中心开始时，我们需要X 距离才能到达角落或侧面，这与我们从当我们需要两倍的X 距离时的一个角落。这就是为什么我将渐变的大小设置为200% 200%，并且我只是调整了背景位置以具有相同的视觉效果。

这是最终的背景：

.box
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5) , transparent) top right/200% 200%, 
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px) top left/200% 200%;
 height:200px;


body 
 background:blue;

<div class="box">

</div>

相关问题：How to animate a radial-gradient using CSS?