css中的阴影、渐变：

---

1、元素阴影box-shodow ：

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

h-shadow:水平阴影的位置，可以为负值，正值向右（必选属性）

v-shadow:垂直阴影的位置，可以为负值，正值向下（必选属性）

blur:阴影模糊半径，属性值为0，一点也不模糊（可选属性）

spread:阴影扩展半径，属性值越大，扩展的半径越大，不能为负值（可选属性）

color:阴影颜色（可选属性）

outset/inset:阴影在属性的内部还是外部，默认是在外部（可选属性）

2、文字阴影text-shadow：

text-shadow：水平位置 垂直位置 模糊距离 阴影颜色
text-shadow：h-shadow v-shadow blur color

h-shadow:水平阴影的位置 ; 允许负值    必需

v-shadow:垂直阴影的位置 ; 允许负值 	必需

blur:模糊距离	可选

color:阴影颜色	可选

3、线性渐变：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：默认为to bottom，即从上向下的渐变；

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

4、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向” 向 “另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

background: radial-gradient(center, shape, size, start-color, …, last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，
			 如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；
     farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

5、重复性渐变

1.重复性线性渐变

div { background: repeating-linear-gradient( 0deg，red, yellow 10%, green 20%); }

2.重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }