1

我在我正在构建的新站点上使用径向渐变，但是在桌面上的 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 中要暗得多。

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

4

1 回答 1

3

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

.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 页面中看到的那样：

在此处输入图像描述

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

第一个渐变：

.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>

相关问题：如何使用 CSS 为径向渐变设置动画？

于 2019-01-21T23:26:57.437 回答