如何控制径向渐变中椭圆的高度？固定垂直半径方案求助

这个场景我太熟悉了——当容器高度不固定时，默认的径向渐变会跟着容器尺寸缩放，导致椭圆渐变的形状完全不符合预期对吧？咱们直接来解决核心问题：让椭圆的垂直半径固定，不受容器高度变化影响。

问题根源 #

你原来的代码里，radial-gradient(ellipse at top center, green, yellow 229px)没有明确指定椭圆的半径，浏览器会自动根据容器的宽高计算渐变的范围（默认遵循farthest-corner规则），所以一旦div高度改变，垂直方向的渐变半径就会跟着变形，自然达不到预期效果。

解决方案：明确指定椭圆的垂直半径为固定值 #

我们可以直接在radial-gradient语法里定义椭圆的水平和垂直半径，把垂直半径设为固定像素值，水平半径用100%占满容器宽度，这样不管div高度怎么变化，垂直方向的渐变范围都能保持固定。

修改后的代码如下：

div {
  width: 778px;
  height: auto; /* 高度不固定，随意调整都没问题 */
  min-height: 100px;
  /* 关键：ellipse [水平半径] [垂直半径] at 位置 */
  background: radial-gradient(ellipse 100% 100px at top center, green, yellow 229px);
}

<div></div>

原理说明 #

• ellipse 100% 100px：表示创建一个椭圆渐变，水平方向半径占满容器宽度（100%），垂直方向半径固定为100px
• at top center：把渐变的中心点定位在容器顶部居中位置，和你最初的需求一致
• 不需要额外设置background-size和background-position，因为渐变的位置和尺寸已经通过radial-gradient的参数明确定义，完全脱离了容器高度的限制

你可以随便调整div的高度，渐变的垂直范围都会保持固定，完美符合预期~

内容的提问来源于stack exchange，提问作者satish kumar V