CSS 渐变背景与遮罩(小计)

linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片

radial-gradient()函数用于创建一个表示两种或多种颜色径向渐变的图片

mask 属性允许使用者通过遮罩或者裁切特定区域的图片来隐藏一个元素的部分或者全部可见区域。

gradient 实例

linear-gradient 参考: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()

radial-gradient 参考: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

mask 实例

mask 参考: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

结语

mask 与 *-gradient 结合能制作出许多炫酷的效果,与之类似的还有 clip-path。