如何用CSS制作顶部带半圆弧形的圆角卡片？

方法1：CSS Clip-path + Drop-shadow（推荐，无额外元素） #

这种方法通过clip-path直接定义卡片形状，配合filter: drop-shadow实现跟随形状的阴影，完美解决多元素叠加导致的阴影异常问题。

代码示例：

<div class="card">
  这里是卡片内容区域
</div>

.card {
  width: 300px;
  height: 220px;
  background: #ffffff;
  padding: 2.5rem 1.5rem 1.5rem;
  box-sizing: border-box;
  /* 使用SVG path绘制顶部带凹弧的平滑形状 */
  clip-path: path('M0,40 C150,0 150,0 300,40 L300,220 L0,220 Z');
  /* 生成跟随裁剪形状的阴影 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  /* 底部添加圆角 */
  border-radius: 0 0 12px 12px;
}

说明：

• clip-path: path() 用贝塞尔曲线绘制了顶部中间向下凹的半圆弧形（连接左右两角），参数可根据需求调整：
  • M0,40 是左上角起点（y值40对应凹弧的深度）
  • C150,0 150,0 300,40 是三次贝塞尔曲线，控制顶部凹弧的弧度
• filter: drop-shadow 会跟随裁剪后的形状生成阴影，替代传统box-shadow（后者对clip-path裁剪后的元素无效）

方法2：单容器 + 伪元素（兼容旧浏览器） #

如果需要兼容不支持clip-path: path()的浏览器，可使用伪元素模拟顶部弧形，通过overflow: hidden确保阴影统一。

代码示例：

<div class="card">
  这里是卡片内容区域
</div>

.card {
  width: 300px;
  height: 220px;
  background: #ffffff;
  padding: 2.5rem 1.5rem 1.5rem;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #ffffff;
  /* 底部圆角形成向上凸的半圆，刚好填充卡片顶部的凹位 */
  border-radius: 0 0 50% 50%;
}

说明：

• 容器设置overflow: hidden，将伪元素超出的部分裁剪，确保整体形状统一
• 伪元素的border-radius: 0 0 50% 50%生成半圆，刚好填补卡片顶部的弧形区域，容器的box-shadow会覆盖整个可见区域，不会出现叠加异常

为什么之前的方法会出问题？ #

你之前用两个独立div叠加的方式，本质是两个分离的元素，它们的box-shadow会各自渲染，要么重叠出现厚重阴影，要么上层元素遮挡下层的阴影，导致显示异常。上面两种方法都基于单个容器（或容器+内部伪元素），阴影是整体渲染的，自然不会有这类问题。

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