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

小提琴：https://jsfiddle.net/2234zy6o/3/

Answer 1

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

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

只需确保在标准定义之后添加，然后其他浏览器使用标准定义并忽略-webkit，而Safari会看到第一个然后找到{{1}并忽略标准。

但是，它并不完全相同。所以我做了一些“插值”并添加了一些停止：

-webkit

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