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

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>

Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise

<length-percentage>{2}

Gives the size of the ellipse explicitly. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

参考：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;
}

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

How to control height of ellipse in radial gradient

css

radial-gradients