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表示以中心点位置发生的偏移,如果是以%形式也是类似的
效果如下: