在前端页面中设置一个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%

收缩前后卡片对比

做好看的阴影&弥散

下边看两个设计上实现弥散的效果

CSS样式参考网址