用Sketch来设计的方法

接下来介绍的是利用和Photoshop具有相同人气的设计工具sketch，来制作弥散阴影效果的方法。

需要注意的有两点：

一方面，在应用阴影效果的大小时要注意按住Option/Alt键。另一方面，你可以为阴影稍微添加一点颜色。

使用HTML/CSS的设计方法

利用CSS的box-shadow属性，可以实现具有深度的阴影效果。

1.box-shadow：【水平方向移动（px）】【垂直方向移动（px）】【模糊半径（px）】【扩展】【颜色（#）】；

水平，垂直方向移动是为了表现出光照过来的方向，从而确定阴影的位置。例如下面的案例，他就同时利用了多个box-shadow，让阴影效果表现的更加真实细腻。

但是，如果你想在box-shadow上运用悬停效果，又不会对页面的载入产生影响，你可以参考这篇文章：How to animate “box-shadow” with silky smooth performance

源代码：http://codepen.io/vipcrew/pen/AXoPNA

下面是各个浏览器的支持情况。我们可以看到，从IE11以后各个浏览器都开始支持了，所以将来也会越来越多的应用这项技术吧。

源代码：http://caniuse.com/#feat=css-boxshadow