css之box-shadow

image.png

设计图如上，关于那个阴影渐变的实现。最初的时候，我是采用渐变实现，结果发现在手机上测试的时候，变成了一个灰色的条，效果不理想。
然后，设计切图，设置背景图片，repeat-y ，定位到左边。效果很理想，毕竟用的是图片。
想想还有没有其他好的办法，尽量手写，不用图片。
经同事提点：用box-shadow可以实现；
先来看下box-shadow的语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。阴影模糊值。不允许负值。
spread	可选。阴影外延值。可以为负值。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (默认outset) 改为内部阴影。

关于box-shadow 最长设置的的就是水平、垂直阴影的位置和blur模糊距离了。spread这个参数很少用到。
单边阴影的实现
要想实现这种单边阴影的效果，就需要spread出场了。

     box-shadow: 16px 0 21px -14px #2f2f2f inset;

单边阴影

四周阴影
四边阴影的实现，x、y轴偏移量都为0，控制阴影模糊半径和阴影扩展半径

    box-shadow: 0 0 21px #2f2f2f inset;

四周阴影

多个阴影
实现多个阴影，需要用逗号隔开

  box-shadow:5px 0px 10px -5px #f00, 17px -1px 16px -12px #0a8 inset;

多个阴影