CSS Radial Gradient 浏览器差异

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 并忽略标准。

但它并不完全相同，尽管如此。所以我做了一些“插值”并添加了一些停靠点:

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

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