css - 如何避免在径向渐变中使用 'at'？

Question

我想得到下面的结果但不使用 at语法，因为它在 Safari 中不受支持，我很难使用它。有谁知道任何方法？先感谢您!

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
  position: relative;
  content: '';
  height: 220px;
  width: 100%;
}

<div id="content">
  <div id="inverted-circle"></div>
</div>

它仍然无法在 iOS 上的 Safari 上运行

Answer 1

考虑 background-size/background-position .您将背景的高度放大两倍，将垂直半径除以 2，然后将背景放在底部。

#content {
  background-color: black;
  height: 300px;
  width: 500px;
}

#inverted-circle {
  background: 
    radial-gradient(110% 100%, white 49.9%, transparent 50.05%) 
    bottom/
    100% 200%;
  height: 220px;
  width: 100%;
}

<div id="content">
  <div id="inverted-circle"></div>
</div>

相关获取更多详情: How to animate a radial-gradient using CSS?

您还可以仅使用一个元素来优化代码:

#content {
  height: 300px;
  width: 500px;
  background: 
    radial-gradient(55% 36.5%, white 99.5%, black 100%) 
     bottom /
     100% 200%;
}

<div id="content">
</div>