CSS卡片形状遮罩（Card Shape Masking）求助：自定义圆角卡片实现遇阻

问题背景 #

需要实现特定样式的卡片圆角，尝试SVG遮罩时，卡片内容变长会导致圆角变形；使用clip-path则无法还原设计图中圆润的边角效果。

解决方案：CSS Mask 组合渐变 #

用CSS的mask属性结合径向渐变与线性渐变，可以实现既符合设计要求的圆润圆角，又能自适应卡片高度变化的效果，无需依赖外部SVG资源。

基础实现代码 #

.card {
  width: 320px;
  background: #ffffff;
  padding: 1.5rem;
  /* 自定义圆角遮罩 */
  mask: 
    radial-gradient(20px at top left, transparent 98%, #000) top left,
    radial-gradient(20px at top right, transparent 98%, #000) top right,
    radial-gradient(20px at bottom left, transparent 98%, #000) bottom left,
    radial-gradient(20px at bottom right, transparent 98%, #000) bottom right,
    linear-gradient(#000, #000) padding-box;
  mask-repeat: no-repeat;
  mask-size: 20px 20px;
  mask-composite: add;
  /* 可选：添加阴影增强视觉效果 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

代码说明 #

• 四个径向渐变分别定义卡片四个角的“镂空”圆角，20px为圆角半径，可根据设计图调整数值
• 中间的线性渐变保证卡片主体区域完全显示，padding-box确保遮罩范围适配内边距
• mask-composite: add让所有遮罩片段叠加生效，组合成完整的卡片形状

适配复杂异形圆角 #

如果设计图中存在非对称圆角（如某一个角半径更大、或位置偏移），只需调整对应径向渐变的参数即可：

.card {
  mask: 
    radial-gradient(30px at top left, transparent 98%, #000) top left,
    radial-gradient(20px at top right, transparent 98%, #000) top right,
    radial-gradient(20px at bottom left, transparent 98%, #000) bottom left,
    radial-gradient(25px at 85% bottom, transparent 98%, #000) bottom right,
    linear-gradient(#000, #000) padding-box;
  mask-size: 30px 30px, 20px 20px, 20px 20px, 25px 25px;
}

方案优势 #

• 纯CSS实现，无需外部资源，维护成本低
• 卡片高度随内容变化时，圆角形状保持不变，不会出现拉伸变形
• 相比clip-path，径向渐变能实现真正的圆润边角，避免生硬折线或锯齿

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