clip-path是mask的首选降级方案，兼容性更好；SVG clipPath实现全平台稳定遮罩；伪元素+渐变可模拟视觉渐隐效果。
用 clip-path 替代 mask 的硬裁剪方案
当目标浏览器不支持 mask（如 IE、旧版 Edge、部分安卓 WebView），clip-path 是最直接的降级选择：它能实现圆形、多边形、椭圆等硬边裁剪，语法简洁，且现代浏览器兼容性远好于 mask。
常见错误现象：clip-path: circle(50% at 50% 50%) 在 Safari 12.1 以下或 Android 4.4 WebView 中完全无效，控制台无报错，元素“原样显示”。
- 必须加
-webkit-clip-path前缀才能在旧 Safari / Chrome 中生效 - 避免使用
inset()或复杂path()—— 它们在 iOS 12.5 及更早版本中静默失败 - 响应式场景下慎用百分比坐标：某些 Android 4.x 浏览器会把
at 50% 50%解析为像素值导致偏移 - 推荐写法：
-webkit-clip-path: circle(40px at center); clip-path: circle(40px at center);（固定尺寸+关键词定位更稳）
用 SVG <clippath></clippath> 实现全兼容遮罩
这是目前唯一能在 IE9+、Firefox 4+、Safari 5.1+、Chrome 23+ 全平台稳定运行的遮罩方案，原理是把裁剪逻辑写进内联 SVG，再通过 CSS 引用。
使用场景：需要精确控制裁剪形状（比如不规则图标、文字镂空、响应式裁剪），又不能接受 JS 介入时。
立即学习“前端免费学习笔记（深入）”；
-
<clippath></clippath>必须放在<svg></svg>的<defs></defs>内，且<svg></svg>需设width="0" height="0"隐藏但保留在 DOM 中 - 引用方式必须写全：
clip-path: url(#myClip); -webkit-clip-path: url(#myClip);（Safari 9–13 要求前缀） - 别用
id带特殊字符（如clip-path: url(#fade-clip)），IE11 会解析失败；只用字母数字下划线 - SVG 内部路径需闭合（
z指令结尾），否则 Firefox 会裁剪异常
用伪元素 + background-gradient 模拟渐隐效果
如果你真正想要的是“视觉上像遮罩”的渐隐、叠加、文字突出效果（而非真实 alpha 裁剪），::before + linear-gradient() 是最轻量、最可控的 fallback 方案。
性能/兼容性影响：无硬件加速开销，支持 rgba()、hover、transition，连 IE10 都能跑通。
- 不要试图给
img直接加伪元素 —— 它是替换元素，::before默认不渲染；改用div包裹，设background-image - 渐变方向要和设计稿一致：
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7))才是从上到下渐暗 - 移动端注意
pointer-events: none加在伪元素上，否则会拦截点击事件 - 若需响应式缩放，用
background-size: 100% 100%配合background-repeat: no-repeat
为什么不用 opacity 或 filter: opacity() 代替
因为它们作用于整个元素及其子树，无法实现“局部透明”，更不能模拟遮罩的亮度/灰度映射逻辑。例如：你只想让图片底部 30% 渐隐，但顶部文字保持清晰 —— opacity 会让文字也一起变淡。
容易踩的坑：filter: opacity(0.8) 在 Safari 14.1 以下会强制开启硬件加速，导致页面滚动卡顿；而 opacity 属性本身在 IE8–9 中仅支持滤镜写法（filter: alpha(opacity=80)），且不支持动画。
真正难处理的不是“怎么让它变透明”，而是“怎么让透明只发生在指定区域”。这正是 clip-path 和 SVG <clippath></clippath> 不可替代的地方 —— 它们定义的是“可见区域的边界”，不是“整体透明度”。
