如何用CSS实现底部内凹的Header（头部）效果？

你之前用 border-radius: 50% 只能得到外凸圆角，是因为这个属性是给元素本身添加圆角，而内凹效果需要让头部底部向内凹陷，得换个思路。下面给你两种实用的实现方法：

方法1：用clip-path快速实现 #

clip-path可以直接裁剪出内凹的形状，代码示例：

.header {
  height: 40vh; /* 根据需求调整高度 */
  background: #2c3e50; /* 头部背景色 */
  clip-path: ellipse(120% 100% at 50% 0%);
}

调整ellipse里的参数可以控制内凹的弧度：120%是横向宽度比例，数值越大内凹越明显；50% 0%是裁剪中心点，固定在顶部中间即可。

方法2：伪元素+径向渐变（兼容性更好） #

如果需要兼容旧浏览器，用这个方法更稳妥：

.header {
  position: relative;
  height: 40vh;
  background: #2c3e50;
  overflow: hidden;
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px; /* 控制内凹的深度 */
  background: radial-gradient(ellipse at center, transparent 60%, #ffffff 60%);
  /* #ffffff是页面主体的背景色，要和页面背景一致 */
}

原理是在头部底部叠加一个径向渐变的伪元素，透明区域形成内凹视觉，和页面背景衔接后就呈现出底部内凹的效果。

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