最推荐用 mask-image 实现渐变遮罩，因其支持透明度过渡、兼容性好（配合 -webkit- 前缀），且比 clip-path 更适合羽化、淡出等效果；需注意黑色=显示、透明=隐藏，配 mask-size 和 mask-attachment 等关键属性。
直接用 mask-image 最干净，但得注意浏览器是否支持、遮罩图透明度怎么解释、以及和 clip-path 的根本区别——前者靠透明度渐变控制可见性，后者靠几何路径硬裁剪。
用 mask-image 实现渐变遮罩最稳
多数场景下不需要 PNG 遮罩图，linear-gradient 或 radial-gradient 就够用，且兼容性比图像好得多。关键点是：黑色 = 完全显示，透明 = 完全隐藏（mask-mode: alpha 默认行为）。
-
mask-image: linear-gradient(to right, black 70%, transparent 100%)表示从左往右 70% 区域完全可见，之后渐隐 - 必须配
-webkit-mask-image前缀才能在 Safari 和旧版 Chrome 生效 - 别漏掉
mask-size: cover或100% 100%，否则渐变可能被拉伸变形 - 如果遮罩“不动”，而图片在滚动或缩放，记得加
mask-attachment: fixed
clip-path 和 mask-image 别混用
两者视觉效果有时相似，但底层逻辑完全不同：clip-path 是布尔裁剪（要么显示，要么不显示），边缘永远锐利；mask-image 支持半透明过渡，能做出羽化、模糊入口、动态溶解等效果。
- 想做“文字从右侧淡出”？
clip-path做不到平滑过渡，必须用mask-image+ 渐变 - 想让头像变成六边形且带 2px 柔边？
clip-path: polygon(...)只能出硬边，得用 SVG 遮罩图或mask-image配合带 alpha 的 PNG -
clip-path支持动画（如clip-path: circle(0%) → circle(100%)），mask-image的渐变参数也能动画，但部分浏览器对mask-image动画支持不稳定
伪元素叠加方案适合简单交互遮罩
当只需要 hover 显隐一层半透明色块（比如图片上浮文字时压暗背景），用 ::before 最轻量，不用动 DOM 结构，也不依赖新 CSS 属性。
- 务必设
position: absolute+top: 0; left: 0; width: 100%; height: 100%确保覆盖完整 - 用
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0))，别写background: rgba()—— 浏览器会直接忽略非图像值 - 如果遮罩层不能拦截点击（比如要透出底下的按钮），加
pointer-events: none - 需要响应式？把伪元素的
background-size和background-position单独写，和图片层解耦
真正难的不是写哪一行 CSS，而是判断该用哪条路：要不要柔边？动不动态？支不支持 Safari？有没有点击穿透需求？这些决定了你是写三行 mask-image，还是套两层伪元素，还是干脆切个 SVG <mask></mask>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
