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

## 概述 `mask-image` 基于图像/渐变作为遮罩控制可见性；`clip-path` 基于路径裁剪渲染区域。适合头像裁剪、徽章与卡片视觉效果。 ## 用法/示例 ```css .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