CSS mask-image 与 clip-path：形状裁剪与性能建议

概述

mask-image 基于图像/渐变作为遮罩控制可见性；clip-path 基于路径裁剪渲染区域。适合头像裁剪、徽章与卡片视觉效果。

用法/示例

.avatar { clip-path: circle(50%); }
.badge { mask-image: radial-gradient(circle, #000 60%, transparent 62%); mask-size: cover }

/* 使用 SVG 路径 */
.card { clip-path: path('M0,0 L100,0 L100,80 Q80,100 60,80 L0,80 Z') }

工程建议

• 优先使用简单路径与矢量裁剪，避免复杂位图遮罩导致重绘成本上升。
• 在动效中优先合成属性与较低频率更新，减少布局与绘制压力。
• 验证在不同设备上的抗锯齿与边缘表现，必要时调整像素对齐。

参考与验证

• MDN：clip-path — https://developer.mozilla.org/docs/Web/CSS/clip-path
• MDN：mask-image — https://developer.mozilla.org/docs/Web/CSS/mask-image