HTML5复习 (10)

CSS3渐变

一、线性渐变

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

direction方向（默认从上到下,不写就是从上到下），color-stop1开始颜色 color-stop2结束颜色

1.水平方向    webkit写开始方向    moz、o 写结束方向   标准语法就是 to right（到右边）

background:linear-gradient(to right,red,blue); //从红渐变成蓝色

2.对角线渐变 水平方向的时候    webkit写开始方向    moz、o 写结束方向   标准语法就是 to right bottom（到右边）

background:linear-gradient(to right bottom,red,blue); //从红渐变成蓝色

3.角度  background:linear-gradient(45deg,red,blue);

4.多个颜色 background:linear-gradient(red,blue,yellow,pink);

background:linear-gradient(red,blue,yellow,pink);

background:linear-gradient(to right,red 10%,blue 20%,yellow 50%,pink 100%);

5.透明渐变

background:linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));  //由透明变成不透明

6.重复渐变

background:repeating-linear-gradient(red 0%,blue 10%,red 20%);

三、径向渐变 radial-gradient

background:radial-gradient(圆心位置(省略就是center)，形状/尺寸，颜色);

圆心写成30%，70%  就是距左边30%，距上边70%的位置。

形状 circle、ellipse（椭圆）。 如果要一起写，就不加逗号，只加空格。

尺寸 closest-side:最近边  closest-corner：最近角   farthest-side：最远边  farthest-corner：最远角。