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

---

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

keywords:

• mask
• clip-path
• SVG path
• 圆角与图形
• 性能与兼容

description: 介绍 mask 与 clip-path 的差异与用法，使用基本形状与 SVG 路径实现遮罩与裁剪，说明性能边界与跨浏览器兼容策略，提供示例与参考。

categories:

• 文章资讯
• 编程技术

---

概述

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-path
• MDN mask 文档：https://developer.mozilla.org/docs/Web/CSS/mask
• CSS 与 SVG 相关规范：W3C 文档