CSS 径向渐变浏览器差异

Question

我有一个非常简单的 CSS 径向渐变，它在 Safari 和其他浏览器中看起来明显不同：

<style>
  body {
     background: #000;
  }
  div {
    height: 200px;
    width: 200px;
    background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
  }
</style>

<div></div>

有什么想法吗？如何让它们看起来都像 Safari 版本？

Safari                         Firefox

Fiddle: https://jsfiddle.net/2234zy6o/3/

Answer 1

我终于找到了一个简单的解决方案：Safari 需要一个自己的风格：

background-image: -webkit-radial-gradient(#1493a4, transparent);

只要确保在标准定义之后添加它，其他浏览器就会使用标准定义并忽略-webkit，而Safari会看到第一个但随后找到 -webkit 并忽略标准。

但还是不太一样。所以我做了一些 'interpolation' 并添加了一些停靠点：

background-image: -webkit-radial-gradient(100px,
   #1493a4 0%,
   rgba(20,147,164,0.4) 40%,
   rgba(20,147,164,0.2) 55%,
   transparent 100%
);

它仍然不一样但很相似 - 至少我可以忍受它。

CSS 径向渐变浏览器差异

CSS Radial Gradient browser differences

css

radial-gradients