CSS3 渐变

css3 渐变

css3的渐变可以使两个或以上颜色之间实现平缓过渡的效果

一.线性渐变

语法:

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

属性	值
shape size at position	渐变方向,可选,默认从上到下,to right(从左/右到右),to top/bottom/left,角度angle
color-stopN	颜色结点,必填,支持透明度,rgba() 函数来定义颜色结点

1.不填direction,渐变方向默认从上到下

background-image: linear-gradient(green, yellow);

效果如下:

2.从右到左渐变

background-image: linear-gradient(to left, green , yellow);

效果如下:

3.以某个角度方向渐变,以下是45度方向渐变

background-image: linear-gradient(45deg,green,yellow);

效果如下:

4.使用多个颜色结点

background-image: linear-gradient(to left, red, green , yellow);

效果如下:

5.使用 rgba() 创建有透明度的颜色结点,0为完全透明,1为完全不透明

background-image: linear-gradient(to left,rgba(0,255,0,0), rgba(0,255,0,1))

效果如下:

6.重复的线性渐变

background-image: repeating-linear-gradient(to right,green 0px ,green 10px,yellow 10px,yellow 20px);

上面这句话的意思是:从左到右渐变,green从0px开始到green10px结束,yellow从10px开始到20px结束,然后重复

效果如下:

 

二.径向渐变

语法:

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

属性	值
shape size at position	渐变中心,可选,默认是中心,circle at 10px 20px(中心点在X为10px,Y为20px处)
color-stopN	必填,颜色结点,支持透明度,rgba() 函数来定义颜色结点

1.中心点在X为10px,Y为20px处

background-image: radial-gradient(circle at 10px 20px, green, yellow, blue);

效果如下:

2.设置径向渐变形状,circle圆形,ellipse椭圆形,默认值ellipse

background-image: radial-gradient(circle,green, yellow, blue);

效果如下:

background-image: radial-gradient(green, yellow, blue);

效果如下:

3.重复的径向渐变

background-image: repeating-radial-gradient(green, yellow 10px, blue 20px);

其中的10px,20px表示以中心点位置发生的偏移,如果是以%形式也是类似的

效果如下: