box-shadow的用法线条渐变色显示

box-shadow用好了，真的会出神入化

作用

• 用于在元素的框架上添加阴影效果；
• 可以再同一个元素上设置多个阴影效果，并用逗号将他们分开；
• 该属性可设置的值包括阴影的X轴偏移量，Y轴偏移量、模糊半径、扩散半径和颜色。

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow属性接收一个由5个参数组成的值，每个值的意思如下：

-   h-shadow: 水平阴影的位置
-   v-shadow:垂直阴影的位置
-   blur：模糊距离
-   spread：阴影的尺寸
-   color：阴影的颜色

• 1. h-shadow：这个值指定了阴影的水平偏移量。即在x轴上阴影的位置。如果是正数阴影会出现在元素的右边，如果是负值阴影出现在元素的左边。
• 2. v-shadow：这个值指定了阴影的垂直偏移量。即在y轴上阴影的位置。如果是正值阴影会出现在元素的下边，如果是负值阴影会出现在元素的上边。
• 3. blur：这个值代表阴影的模糊半径，如果是“0”意味着阴影是完全实心的，没有任何模糊效果。该值越大，实心度越小，阴影越朦胧和模糊，该值不支持负数。
• 4. spread这个值代表着阴影的尺寸。这个值可以被看作是从元素到阴影的距离。如果正值会在元素的四个方向延伸阴影。负值会使阴影变得比元素本身尺寸还要小。默认值“0”会让阴影变得得和元素的大小一样。
• 5. color：这个值是指定阴影的颜色

在线上加渐变色

box-shadow:
21px 0px 0px -20px green,
-21px 0px 0px -20px green,
12px 0px 0px -10px red,
-12px 0px 0px -10px yellow,
0px 21px 0px -20px yellow,
0px -21px 0px -20px yellow,
0px 11px 0px -10px red,
0px -11px 0px -10px red

box-shadow:
21px 0 0 -20px red
11px 0 0 -10px white
-11px 0 0 -10px white