单侧投影
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);
网友评论