在前端页面中设置一个div有卡片的效果，我们只要设置好CSS中的box-shadow的属性就可以了
我们先看一下box-shadow和sketch参数之间的设置对比
CSS中的box-shadow属性参数表
| 属性 | 必选项 | 表达 | 允许负值 | 对应Sketch参数 |
|---|---|---|---|---|
| h-shadow | 必选 | 水平阴影的位置 | 允许 | 对应x值 |
| v-shadow | 必选 | 垂直阴影的位置 | 允许 | 对应y值 |
| blur | 可选 | 模糊距离 | 不允许 | 对应模糊 |
| spread | 可选 | 阴影的尺寸 | 允许 | 对应扩展 |
| color | 可选 | 阴影的颜色 | - | 对应颜色 |
| inset | 可选 | 将外部阴影 (outset) 改为内部阴影 | - | 对应内阴影 |
用sketch画一个卡片来测试还原度
当box-shadow参数和设计稿参数一致时基本还原度是100%
通过以上截图我们发现box-shadow少了一个参数；那就是spread；对应sketch里的扩展， 如果不写这个参数默认长度为0；也是开发最容易忽略的。
在做阴影的过程中当遇到特殊情况或当前页面需要更干净的阴影使界面看起来更舒服， 我们可以对阴影进行收缩相应的像素。
收缩前后卡片对比
我们经常会遇到彩色的或渐变色的卡片以及彩色的按钮；
给这样的卡片做出弥散效果的阴影可能就需要给阴影做收缩才能感觉弥散效果舒服些。
下边看两个设计上实现弥散的效果
从视觉上来看两种阴影效果是一样的；但是实现的过程不一样
第一种是直接给卡片设置阴影参数，然后做一个收缩；
第二种是在卡片底部做一个比卡片小的卡片设置模糊通过位置设定达到投影的效果；
理论上来讲两种都可以开发实现这种效果，但是为了减少开发工作量和兼容定位问题
第一种方案是最合理的，只需要注意不要少掉 " 扩展 " 这个参数；
Android和iOS的实现方式有所不同；这里暂时只介绍CSS的样式参数。
一般是特殊情况；多为顶层为图片的情况，切图自身打阴影会很不自然；需要图片和阴影分开定位，
当然这样就可以给图片和阴影分开做动效，在动效实现上会更加灵活；
对于大图情况下开发出阴影效果会比直接切图清晰太多，但是在网络环境不好的情况下也可能会出现图片加载速度没有阴影出来的快的状况；
所以一般不是为了实现动效的情况下还是避免这种情况。
最常见的两层做阴影就是以下这种情况；图片阴影不和图片放在一块切图；分为两层，图片的消失和出现动效就会更加灵活。
在Codepen.io有很多有趣的CSS样式源码
