CSS3渐变详解

渐变(gradient)

• 线性渐变：一个方向的渐变，可以是由上往下、由下往上、由左往右…
• 径向渐变：多个方向发散的渐变(可理解为由圆心向外发散)。

线性渐变详解：
语法:background-image:linear-gradient(direction,color1,color2);
- linear-gradient表示线性渐变
- direction表示渐变方向，可以填to left从右向左，to right从左向右，to top从下向上，to bottom从上向下，to top left从右下向左上，to bottom right从左上向右下…
- color1，color2表示渐变颜色，可以有更多个。
- 透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))，rgba()函数最后一个值代表透明度，0表示完全透明，1表示不透明。
重复渐变background-image:repeating-linear-gradient(direction,color1,color2 );

径向渐变详解
语法：background-image:radial-gradient(position,shap,size,color1,color2);
position是圆心定位，就是圆心的位置。
shap是圆的形状，circle是圆，elipse是椭圆(默认)，宽高一致就是正圆。
size是圆的尺寸，只能用四个值设置，closest-side最近边；farthest-side最远边；closest-corner最近角；farthest-corner最远角
color1，color2是颜色渐变的起止色。