颜色渐变 — 应用在元素的背景上
渐变分为两种:线性渐变 和 径向渐变
linear-gradient() 线性渐变
Tip:线性渐变的初始颜色变化默认是从上到下。
而且,渐变必须设置在background的身上。
background-image: linear-gradient;
首先,线性渐变是支持多个颜色渐变的。
background: linear-gradient(red,yellow,blue,pink);
设置渐变方向:
background: -webkit-linear-gradient(bottom,red,pink);
如果在参数里直接设置方向,那么需要加浏览器前缀。
如果在方向的前面加上to,那么就不需要加浏览器前缀。
background: linear-gradient(to left,red,pink);
to left 、 to right 、 to top 、to bottom ,没有to center
当然,关于方向我们也可以组合来使用:
to left top 或者top left bottom.....
我们除了设置具体的方向值,还可以通过 angle 来设置角度。
在代码中deg表示角度
0deg表示从下向上
如果角度为正,则为顺时针,如果角度为负,则为逆时针。
渐变百分比
background: linear-gradient(to left,red 10%,black 90%);
方向:从右到左,
表示从起始方向开始,从右向左的10%为纯红色,从10%到90%为红色向黑色的渐变色,剩下的
为纯黑色。
练习:
红、绿、蓝、黄
灰 绿 灰 绿
线性渐变在IE:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ff0000',GradientType='1');
GradientType = 0 方向是从上向下 1为从左向右
重复线性渐变
一个渐变的过程已经完成,后续重复的进行这个过程。
repeating-linear-gradient() ;
radial-gradient:径向渐变
方向:
left top right bottom ,前面要加webkit
也可以设置具体的值:apx bpx
还可以设置圆的形状:
正圆:circle
椭圆:ellipse