box-shadow 高阶玩法：纯 CSS 画蒙娜丽莎和粒子星空

想必写过 CSS 的同学都用过 box-shadow，它可以给元素设置阴影，增加立体效果。

比如说这样：

但它能做的可不只是阴影，还可以用来做出很多有趣的效果：

比如画蒙娜丽莎：

画星空：

这些效果都是 box-shadow 实现的！

是不是不敢相信？

今天我们就一起研究下 box-shadow 的高阶用法，来实现这些效果吧。

先过一下基础：

box-shadow 基础

box-shadow 可以设置 5 个值：x偏移量 y偏移量 阴影模糊半径 阴影扩散半径 阴影颜色

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 

比如这个案例：

阴影中心点 x 轴偏移了 300px，y 轴偏移了 300px：

那阴影扩散半径是啥意思？

看这张图就明白了：

还有阴影模糊半径：

再来看下这几个值：

box-shadow: 300px 300px 30px 100px blue; 

x 轴位移、y 轴位移都是指中心点的位移。阴影的半径就是元素的 width/2 + 扩散半径 + 模糊半径。

而且 box-shadow 可以设置多个，通过逗号分隔，也就是多重阴影。

这样就可以用来做一些有意思的事情了：

比如把 width、height 设置为 0，然后设置多个阴影：

width、height 为 0，模糊半径为 0，扩散半径为 5px，那整个阴影就是一个 10px