CSS 图像遮罩与裁剪：mask 与 clip-path 的性能与兼容

概述 `mask` 基于透明度进行遮罩，支持图像与渐变；`clip-path` 基于几何路径裁剪显示区域。二者可实现非矩形布局与特效。应控制复杂度与重绘区域以保证性能。 示例 ```css .avatar { clip-path: circle(50% at 50% 50%) } .banner { mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 80%) } /* 使用 SVG 路径 */ .shape { clip-path: path('M10,10 L90,10 L90,90 L10,90 Z') } ``` 工程建议 - 选择策略：几何裁剪优先使用 `clip-path`；需要透明渐变时使用 `mask`。 - 性能：减少路径复杂度与层数；与合成属性协作（`transform/opacity`）。 - 兼容：验证不同浏览器支持；提供简化回退与矩形版本。 参考与验证 - MDN `clip-path` 文档：https://developer.mozilla.org/docs/Web/CSS/clip-path - MDN `mask` 文档：https://developer.mozilla.org/docs/Web/CSS/mask - CSS 与 SVG 相关规范：W3C 文档