如何避免在径向渐变中使用 '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>

相关获取更多详情：

您也可以只用一个元素来优化您的代码：

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

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

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

How can I avoid using 'at' in radial-gradient?

css

radial-gradients