好看的卡片阴影

在前端页面中设置一个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；也是开发最容易忽略的。

在作阴影的过程当中当遇到特殊状况或当前页面须要更干净的阴影使界面看起来更舒服，

咱们能够对阴影进行收缩相应的像素。

收缩先后卡片对比

作好看的阴影&弥散

咱们常常会遇到彩色的或渐变色的卡片以及彩色的按钮；

给这样的卡片作出弥散效果的阴影可能就须要给阴影作收缩才能感受弥散效果舒服些。

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

从视觉上来看两种阴影效果是同样的；可是实现的过程不同

第一种是直接给卡片设置阴影参数，而后作一个收缩；

第二种是在卡片底部作一个比卡片小的卡片设置模糊经过位置设定达到投影的效果；

理论上来说两种均可以开发实现这种效果，可是为了减小开发工做量和兼容定位问题

第一种方案是最合理的，只须要注意不要少掉扩展这个参数；

这里只介绍了CSS样式的参数；

Android和iOS的实现方式和这个不太同样可是也能达到弥散阴影的效果，

Android能够经过CardView的cardElevation属性设置z轴高度来控制阴影大小；

iOS能够经过UIView的layer的UIBezierPath属性来设置阴影的形状及范围。

什么状况下会用到两层分开的状况呢？

通常为特殊状况；多为顶层为图片的状况，须要图片和阴影分开定位，

固然这样就能够给图片和阴影分开作动效开发了，在动效实现上会更加灵活；

对于大图状况下开发出阴影效果会比直接切图清晰太多，可是在网络环境很差

的状况下也会出现图片加载速度没有阴影出来的快的情况；

因此通常不是为了实现动效的状况下仍是避免这种状况。

CSS样式参考网址

codepen.io

END