CSS Masking 遮罩与裁剪
CSS遮罩：mask-image（PNG alpha/SVG/gradient）、mask-size/mask-position/mask-repeat、clip-path裁剪路径（circle/polygon/inset/ellipse）、clip-path动画、SVG clipPath · 难度：入门 · +10XP
CSS Masking —— 用任意形状裁剪元素
想做一个文字镂空效果，让背后图片透出来？或者做一个不规则形状头像框？CSS Masking就是干这个的。
mask-image —— 用图片做遮罩
.masked {
background: url('landscape.jpg') center/cover;
mask-image: url('star.svg'); /* SVG形状 */
mask-size: contain;
mask-repeat: no-repeat;
}黑色区域=隐藏，白色区域=显示，灰色=半透明。
用渐变做遮罩
.fade-bottom {
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}效果：元素底部渐隐消失——常用于截断长文本。
clip-path vs mask 对比
| clip-path | mask |
|---|---|
| 硬裁剪，要么显示要么不显示 | 软遮罩，支持半透明过渡 |
| 不支持渐变 | 支持渐变、PNG、SVG |
| 性能更好 | 功能更强 |
动手练习
- 基础练习：做一个圆形头像+心形边框的遮罩效果。
- 进阶应用：做一个文字镂空横幅——大号文字作为遮罩透出背后的图片。
- 项目实战：在文章列表页用linear-gradient遮罩让长文本底部渐隐。