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-pathMDN：`mask-image` — https://developer.mozilla.org/docs/Web/CSS/mask-image