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;
多个阴影
