好看的卡片阴影

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

转载于:https://juejin.im/post/5cab4bfee51d456e686592d1