如何用CSS实现上下渐变背景底部居中轻微弯曲的效果

你可以通过两种方案实现底部居中内凹的渐变效果，都不需要修改现有HTML结构：

方案1：伪元素实现（兼容性更好） #

原理是用一个超宽的白色圆形伪元素遮挡渐变区域底部中心位置，刚好形成内凹效果，兼容绝大多数浏览器：

.content-container {
  position: relative;
  height: 150px;
  background: linear-gradient(180deg, #FAFDFF 0%, #E8F3F9 100%);
  overflow: hidden;
}
/* 内凹弧度实现 */
.content-container::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 200vw; /* 宽度足够大即可，保证覆盖容器全宽 */
  height: 20px; /* 调整这个数值可以控制内凹的深度 */
  border-radius: 50%;
  background: #fff; /* 和渐变衔接的外部背景色保持一致即可 */
  z-index: 0;
}
/* 容器内内容如果被遮挡，给内容添加相对定位提高层级即可 */
.content-container p {
  position: relative;
  z-index: 1;
}

方案2：mask遮罩实现（代码更简洁） #

利用CSS mask属性直接裁剪渐变区域的形状，代码更精简：

.content-container {
  height: 150px;
  background: linear-gradient(180deg, #FAFDFF 0%, #E8F3F9 100%);
  /* 核心遮罩代码 */
  -webkit-mask: 
    linear-gradient(to bottom, #fff 0, #fff 0) content-box,
    radial-gradient(circle at 50% 100%, transparent 20px, #fff 20px);
  mask: 
    linear-gradient(to bottom, #fff 0, #fff 0) content-box,
    radial-gradient(circle at 50% 100%, transparent 20px, #fff 20px);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding-bottom: 20px; /* 和radial-gradient里的20px保持一致，控制内凹深度 */
  box-sizing: border-box;
}

两个方案都可以调整弧度相关数值适配你的设计需求。

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