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

概述`mask` 基于透明度进行遮罩，支持图像与渐变；`clip-path` 基于几何路径裁剪显示区域。二者可实现非矩形布局与特效。应控制复杂度与重绘区域以保证性能。示例.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-pathMDN `mask` 文档：https://developer.mozilla.org/docs/Web/CSS/maskCSS 与 SVG 相关规范：W3C 文档