难点
普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。
场景:
1. 半透明图像，背景图像，border-image
2. 具有点状、虚线或者半透明的边框，但是没有背景
3. 伪元素生成的对话气泡
4. 切角形状
5. 折角形状
6. 菱形图像
解决不规则形状的投影，目前最简单的方法就是使用filter滤镜，使用CSS滤镜最大的好处就是平稳退化。
常用的filter滤镜函数包括: blur() grayscale() drop-shadow()
滤镜会把任何非透明的部分都打上投影, 所以不建议对文本单独再设置text-shadow, 同时这个text-shadow与box-shadow产生的shadow效果是两回事。
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
BOX-SHADOW
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
Filter
下次细讲 blur() grayscale()