其中的云层，就是利用了 多重box-shaodw 在一个伪元素内生成的。下面我利用不同的颜色，直观的表达一下如何利用 box-shadow 绘制这个图形：
当所有阴影的颜色都是同色的时候，就很自然变成了一朵云朵：
当然，脑洞够大的话，更复杂一点的也是可以的，来看看下面这个图形，也是由单个标签完成：
其中比较困难的是其中环绕字母 e 的那个圆以及那个切入的不规则角，看看用阴影怎么把它做出来，利用了两重 box-shadow：
嗯，当然，你问我这些图形有什么用。我觉得实用性真的不强吧，我个人而言是兴趣，从中获取到了乐趣，同时也学到了很多东西，对属性本身印象也更加深刻，遇到许多 CSS 方面的问题的时候，思路更加开阔。
更多有趣的图形，可以 戳这里 – Demo
多重 box-shadow 实现立体感
这种方法运用在 text-shadow 上同样可以，可以实现文字的立体感。
运用多重 box-shadow ，不断偏移 1px ，就可以产生十分立体的感觉。
运用在按钮：
运用在文字：
多重 box-shadow 实现任意图片转换
嗯，讲真~~ 我觉得这个是最有趣的。
多重 box-shadow 还能做什么呢。由于 box-shadow 的多重性，也就是 无论多少重都可以，那么理论上任意一张图片，每一个像素点都可以由一重 1px*1px 的 box-shadow 来表示。
为了完成这个任务， canvas 刚好提供了一个方法 CanvasRenderingContext2D.getImageData 可以获取到图片每一个像素点的 rgba 值，那么图片转为一个完全由 box-shadow 表示的图片是完全可行的。
为此，我倒腾了许久，写了这么一个小插件，可以将任意图片转化为由 box-shadow 表示的单个 div 标签。
Demo–戳我体验一下。
如果上面的几点还有用武之地，那么这个功能我觉得除了看似厉害之外真的是毫无实用之处，上面也说了，box-shadow 是比较耗性能的，因为即便是一个 100px*100px 的图形，转化之后都有 10000 重阴影，无论是对性能还是可读性而言，都是毁灭性的，但是讲真，还是挺有趣的。
box-shadow 就先说这些吧，box-shadow 肯定还要其它的一些妙用，细心之人可以继续挖掘之。
filter:drop-shadow
其实说到 box-shadow，就不得不提到另一个和它极为相似的 CSS3 新属性 filter:drop-shadow，filter 即是 CSS 滤镜，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。
当然这里我们只说 filter:drop-shadow。
filter:drop-shadow 也很好玩，本想继续长篇大论讨论下去，无奈发现 张鑫旭大神两篇文章已经把我想说的都囊括了，前人栽树，后人乘凉，我也就不再献丑了。
两篇非常值得一读的文章：
CSS3 filter:drop-shadow滤镜与box-shadow区别应用
PNG格式小图标的CSS任意颜色赋色技术
另外 《CSS SECRET》（CSS揭秘）这本大作也对 filter:drop-shadow 有详细的描述，可以去看看。
希望这篇文章对大家有所帮助，尤其是在对问题解决的思维层面上。
到此本文结束，如果还有什么疑问或者建议，可以多多交流，写文章不容易，觉得不错的希望大家点个推荐。
原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。