React项目如何实现带侧边半圆缺口及统一阴影的卡片组件

核心问题原因 #

你当前的实现有三个核心问题：

• 伪元素用了边框样式，背景是透明的，看起来是附加在卡片上的圆形，而非向内凹陷的缺口
• 卡片设置了overflow: hidden，会裁切边缘的阴影表现，无法实现缺口处的自然阴影衔接
• 仅给卡片容器加了box-shadow，阴影只会沿容器矩形轮廓生成，不会适配缺口形状

实现方案 #

推荐两种可直接落地的实现方式，都可以达到你要的缺口阴影效果： #

方案1：背景渐变挖洞法（兼容性好，代码最简洁）

直接用径向渐变在卡片左侧对应位置挖掉半圆形透明区域，配合drop-shadow滤镜实现适配轮廓的阴影：

.card__container{
  padding:1.75rem;
  margin:1.25rem 2.5rem 2.5rem;
  position:relative;
  height:100vh;
  /* 替换box-shadow为drop-shadow，会跟随元素透明轮廓生成阴影 */
  filter: drop-shadow(0 0 8px rgba(0,0,0,.08));
  /* 用径向渐变挖掉左侧的半圆缺口，15px是半圆半径，110px是距离顶部的位置 */
  background: radial-gradient(circle at left 110px, transparent 15px, #fff 0);
}
/* 可直接删除原有的:after伪元素代码 */

这个方案不需要额外的伪元素，直接通过背景实现缺口，阴影自动适配形状，效果最自然。 #

方案2：伪元素遮盖法（适合需要对缺口做额外样式调整的场景）

用和页面背景同色的伪元素卡在卡片左侧边缘，模拟缺口效果，同时调整阴影衔接：

.card__container{
  padding:1.75rem;
  margin:1.25rem 2.5rem 2.5rem;
  position:relative;
  height:100vh;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.08);
  background: #fff;
  /* 给卡片左侧加对应间距，避免内容被缺口挡住，可按需调整 */
  padding-left: calc(1.75rem + 15px);
}

.card__container:after{
  content: '';
  position: absolute;
  display: block;
  width: 30px;
  top: calc(110px - 15px);
  left: -15px;
  height: 30px;
  /* 背景和页面背景保持一致，替换为你的页面实际背景色即可 */
  background: #f5f5f5;
  border-radius: 50%;
  /* 给伪元素加内阴影，模拟缺口处的凹陷阴影效果，参数和卡片阴影对应即可 */
  box-shadow: inset 0 0 4px rgba(0,0,0,.06);
}

如果你的页面背景是渐变或者有图案，优先选择方案1，不需要匹配背景色，适配性更强。

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