MODERN CSS
遮罩与裁切mask / clip-path
用形状或渐变把元素「剪」出来：圆形、三角、波浪、渐隐。做非矩形图片与渐变淡出最干净的方式。
效果预览
适合用在哪
异形图片、渐变淡出（配合滚动）、斜切区块、把复杂 SVG 形状应用到图片上。
容易踩的坑
- 不写 -webkit-mask-image 前缀，Safari 上遮罩效果完全不生效。
- clip-path 会裁掉点击区域，异形按钮的边角热区与预期不符。
- 对大图持续动画 mask-position，低端设备每帧重绘，滚动明显掉帧。
设计提示词 · Prompt
遮罩与裁切（mask / clip-path）：两者区别 —— clip-path 做硬边缘裁切（polygon / circle / ellipse / path），mask 支持柔和过渡（渐变或图片明度）。常用写法：三角形 clip-path:polygon(50% 4%, 96% 96%, 4% 96%)；斜切区块 polygon(0 0, 100% 0, 100% 88%, 0 100%)；底部渐隐 mask-image: linear-gradient(to bottom, #000 26%, transparent)（配合 -webkit-mask-image 前缀）；圆形聚焦 mask-image: radial-gradient(circle at 40% 40%, #000 58%, transparent 62%)。要点：mask 与 clip-path 都不改变盒模型尺寸（布局仍按原矩形算），所以对居中定位没影响；动画 mask-position 或 clip-path 可做揭示效果；用 @supports 判断（-webkit-mask 前缀在 Safari 上仍需要）。
mask / clip-path: the difference — clip-path makes hard-edged cuts (polygon / circle / ellipse / path), while mask supports soft transitions (gradients or image luminance). Common recipes: triangle clip-path:polygon(50% 4%, 96% 96%, 4% 96%); slanted section polygon(0 0, 100% 0, 100% 88%, 0 100%); bottom fade mask-image: linear-gradient(to bottom, #000 26%, transparent) (with the -webkit-mask-image prefix); circular focus mask-image: radial-gradient(circle at 40% 40%, #000 58%, transparent 62%). Key points: neither mask nor clip-path changes the box size (layout still uses the original rectangle), so centering isn't affected; animating mask-position or clip-path creates reveal effects; check with @supports (the -webkit-mask prefix is still needed in Safari).
常见搭配
同一页面里经常和「遮罩与裁切」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center" style="width:100%">
<div class="mc-mask">
<div class="mc-mask__i mc-mask__i--blob"></div>
<div class="mc-mask__i mc-mask__i--tri"></div>
<div class="mc-mask__i mc-mask__i--grad"></div>
</div>
</div>