如何控制径向渐变中椭圆的高度

Question

我正在尝试为我的背景使用径向渐变，下面是代码。

div {
  width: 778px;
  height: 100px;
  background: radial-gradient(ellipse at top center, green, yellow 229px);
  background-size: 100% 100%;
  background-position: 0% 0%;
}

<div></div>

当我增加 div 的高度时，它显示为

但我们希望在辐射状中为椭圆设置固定的垂直半径，如下图所示

我尝试围绕背景大小进行调整，但 div 的高度不固定。所以我真的不能设置背景大小。

任何帮助将不胜感激。提前致谢。

Answer 1

使用值而不是省略号

body {
  background: radial-gradient(220px 80px at top center, green, yellow);
  margin: 0;
  height: 100vh;
}

<ending-shape>

可以是circle 或ellipse；分别确定渐变的结束形状是圆形还是椭圆形。如果省略，则如果<size> 是单个<length>，则结尾形状默认为圆形，否则为椭圆

<length-percentage>{2}

明确给出椭圆的大小。 第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框的相应尺寸的。负值无效。

参考：https://drafts.csswg.org/css-images-3/#valdef-radial-gradient-ending-shape

---

另一种选择是使用固定的background-size：

body {
  background: 
    radial-gradient(farthest-side at top center, green, yellow)
      top center/350px 80px no-repeat,
    yellow;
  margin: 0;
  height: 100vh;
}