单侧投影

http://dabblet.com/gist/cc055dadf493c15723cf

image.png image.png image.png

邻边投影

http://dabblet.com/gist/d29d19ab66177b18bd64
box-shadow: 3px 3px 6px -3px black;

image.png

双侧投影

把单侧投影的技巧运用两次

box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;

image.png

不规则投影

http://dabblet.com/gist/d8a2376c79906d68f3d1

-webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));

当元素添加了一些伪元素或半透明的装饰之后，它就有些
力不从心了，因为 border-radius 会无耻地忽视透明部分

image.png image.png image.png

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

染色效果

http://dabblet.com/gist/b338c9940a31b727b7a9

image.png image.png

毛玻璃效果

https://jsfiddle.net/noyanse/uu8eswc0/25/
http://dabblet.com/gist/d9f243ddd7dbffa341a4
filter: blur(20px);

折角效果

http://dabblet.com/gist/42f7d7c7d512039552aa3d07118c1f9f