css3渐变色

作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。

种类：分为线性渐变与径向渐变

一、线性渐变

1、向下/向上/向左/向右/对角方向

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction属性值：

to bottom	默认值，从上到下
to top	从左到右
to left	从右到左
to right	从左到右
to bottom right	从左上到右下

 其中对角有四个属性值，分别为左上、左下、右上、右下，这里就不一一列举了。

 实例： background-image: linear-gradient(red,yellow,green);

2、使用角度属性

语法：background-image: linear-gradient(angle, color-stop1, color-stop2, ...);

angle表示角度，属性值为 xxxdeg。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

 

实例： background-image: linear-gradient(-90deg, red, yellow);

 

二，径向渐变 

 语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 shape传入渐变形状，属性值：

ellipse	默认值，椭圆形
circle	圆形

 size传入渐变大小，属性值：

farthest-corner	默认值，指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
具体数值或百分比	一个值表示半径大小，两个值表示椭圆形渐变的长半轴和短半轴

注意：若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数 ，个人认为或许是因为圆形半径若为百分数的话就无法确定是以元素的宽为标准还是以高为标准了。

at position传入渐变圆心位置,属性值：

center	默认值，表示在中心点
方位名次	top/bottom/left/right/top left/......
具体数值或百分比	0 0 / 10% 10%/......

实例：background: radial-gradient(circle farthest-side at 0 red,yellow);

 

三、线性渐变与径向渐变共同点 

 1、设置不均匀渐变，在颜色后面加上数值或百分比即可，百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

语法：background-image: linear-gradient(direction, color-stop1 数值/百分比, color-stop2数值/百分比, ...);

           background-image: radial-gradient(shape size at position, start-color 数值/百分比, ..., last-color 数值/百分比);

实例： background-image: linear-gradient(red 0%, green 50%, blue 50%) ;

表示：0%-50%为红绿渐变，其中蓝色渐变位置与绿色重叠，失去渐变过渡色，50%后都是蓝色：

 

2、 颜色属性值可以为rgba()，表示透明色渐变

实例：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

 

3、重复渐变

语法：background-image: repeating-radial-gradient(direction, color-stop1 数值/百分比, color-stop2数值/百分比, ...)

           background-image: repeating-linear-gradient(shape size at position, start-color 数值/百分比, ..., last-color 数值/百分比)

注意：数值或百分比小于等于100%，表示一个渐变区间，剩余空间以此渐变区间重复直到铺满整个元素。

实例：background-image: repeating-radial-gradient(red0, red 10%,yellow10%,yellow 20%);