如何修改radial-gradient实现全屏半圆Footer效果？

你的问题出在径向渐变的尺寸设置上——默认的circle会以元素中心到最远边的距离作为半径，所以只能生成一个小半圆，无法撑满全屏宽度。下面给你几种可行的修改方案：

方案一：调整radial-gradient参数（最简单） #

把渐变形状改为椭圆，指定宽度为全屏、高度为footer高度的两倍，圆心固定在底部中心，这样就能生成刚好覆盖footer的顶部半圆：

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  height: 30vh;
  background-image: radial-gradient(ellipse 100% 200% at bottom center, #387546 50%, transparent 50%);
}

或者用固定半径的圆形写法，直接把半径设为屏幕宽度的一半（50vw），确保圆的直径撑满全屏：

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  height: 30vh;
  background-image: radial-gradient(circle 50vw at bottom center, #387546 50%, transparent 50%);
}

方案二：伪元素+border-radius（更灵活） #

如果需要更灵活的调整（比如适配不同高度、添加阴影等），可以用伪元素配合圆角实现：

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  height: 30vh;
  overflow: hidden; /* 裁剪超出的圆形部分 */
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-color: #387546;
  border-radius: 50%;
  transform: translate(-25%, 50%); /* 平移后让顶部半圆刚好显示在footer内 */
}

这两种方法都能实现你要的全屏底部半圆效果，根据自己的需求选择即可。

内容的提问来源于stack exchange，提问作者noclist