CSS3渐变
CSS3渐变
CSS3渐变可以让你在两个或多个指定的颜色之间显示平衡的过渡。
CSS3定义了两种类型的渐变：
- 线性渐变(Linear Gradients)：向下/上/左/右/对角方向
- 径向渐变(Radial Gradients)：由它们的中心定义
线性渐变
语法
background:linear-gradient(direction,color-stop1,color-stop2,...);
其参数有三个，第一个是方向，默认的是从上到下，第二第三个参数是颜色值，表示起始颜色和结束的颜色。
线性渐变-由上到下(默认)
div{
background:-webkit-linear-gradient(red,blue);/*Safari*/
background:-o-linear-gradient(red,blue);/*Opera*/
background:-moz-linear-gradient(red,blue);/*FireFox*/
background:linear-gradient(red,blue);/*标准写法*/
}
显示效果
线性渐变-从左到右
div{
background:-webkit-linear-gradient(left,red,blue);/*Safari*/
background:-o-linear-gradient(right,red,blue);/*Opera*/
background:-moz-linear-gradient(right,red,blue);/*FireFox*/
background:linear-gradient(to right,red,blue);/*标准写法*/
}
显示效果
线性渐变-对角
div{
background:-webkit-linear-gradient(left top,red,blue);/*Safari*/
background:-o-linear-gradient(bottom right,red,blue);/*Opera*/
background:-moz-linear-gradient(bottom right,red,blue);/*FireFox*/
background:linear-gradient(to bottom right,red,blue);/*标准写法*/
}
显示效果
使用角度
语法
background:linear-gradient(angle,color-stop1,color-stop2,...);
参数同样有三个，第一个参数是线性变换的角度，就是水平线与渐变线之间的角度，逆时针方向计算，第二和第三个参数是起始颜色和结束颜色。
div{
background:-webkit-linear-gradient(30deg,red,blue);/*Safari*/
background:-o-linear-gradient(30deg,red,blue);/*Opera*/
background:-moz-linear-gradient(30deg,red,blue);/*FireFox*/
background:linear-gradient(30deg,red,blue);/*标准写法*/
}
显示效果
使用多个颜色节点
div{
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*Safari*/
background:-o-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);/*Opera*/
background:-moz-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);/*FireFox*/
background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);/*标准写法*/
}
显示效果
3 使用透明度
div{
background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));/*Safari*/
background:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*Opera*/
background:-moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*FireFox*/
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));/*标准写法*/
}
显示效果
重复的线性渐变
repeating-linear-gradient()函数用于重复线性渐变
div{
background:-webkit-repeating-linear-gradient(left,red,yellow 10%,green 20%);/*Safari*/
background:-o-repeating-linear-gradient(left,red,yellow 10%,green 20%);/*Opera*/
background:-moz-repeating-linear-gradient(left,red,yellow 10%,green 20%);/*FireFox*/
background:repeating-linear-gradient(to right,left,red,yellow 10%,green 20%);/*标准写法*/
}
显示效果
径向渐变
语法
background:radial-gradient(center,shape size,start-color,...,last-color);
center是径向渐变的中心，shape代表形状，可以是cicle圆形或者ellipse椭圆形（默认是椭圆形），size是指径向渐变的大小，后面的参数是起始颜色和结束颜色。
径向渐变-颜色节点均匀分布（默认情况）
div{
background: -webkit-radial-gradient(red,green,blue);/*Safari*/
background: -o-radial-gradient(red,green,blue);/*Opera*/
background: -moz-radial-gradient(red,green,blue);/*FireFox*/
background: radial-gradient(red,green,blue);/*标准的写法*/
}
显示的效果
径向渐变-颜色节点不均匀分布
div{
background: -webkit-radial-gradient(red 5%,green 15%,blue 60%);/*Safari*/
background: -o-radial-gradient(red 5%,green 15%,blue 60%);/*Opera*/
background: -moz-radial-gradient(red 5%,green 15%,blue 60%);/*FireFox*/
background: radial-gradient(red 5%,green 15%,blue 60%);/*标准的写法*/
}
显示效果
设置形状
div{
background: -webkit-radial-gradient(circle,red,green,blue);/*Safari*/
background: -o-radial-gradient(circle,red,green,blue);/*Opera*/
background: -moz-radial-gradient(circle,red,green,blue);/*FireFox*/
background: radial-gradient(circle,red,green,blue);/*标准的写法*/
}
显示效果
不同尺寸大小的关键字
size参数定义了渐变的大小，它的值有四个：
- cloest-side
- farthest-side
- cloest-corner
- farthest-corner
.div1{
background: -webkit-radial-gradient(60% 55%,closest-side,red,green,blue);/*Safari*/
background: -o-radial-gradient(60% 55%,closest-side,red,green,blue);/*Opera*/
background: -moz-radial-gradient(60% 55%,closest-side,red,green,blue);/*FireFox*/
background: radial-gradient(60% 55%,closest-side,red,green,blue);/*标准的写法*/
}
.div2{
background: -webkit-radial-gradient(60% 55%,farthest-side,red,green,blue);/*Safari*/
background: -o-radial-gradient(60% 55%,farthest-side,red,green,blue);/*Opera*/
background: -moz-radial-gradient(60% 55%,farthest-side,red,green,blue);/*FireFox*/
background: radial-gradient(60% 55%,farthest-side,red,green,blue);/*标准的写法*/
}
.div3{
background: -webkit-radial-gradient(60% 55%,closest-corner,red,green,blue);/*Safari*/
background: -o-radial-gradient(60% 55%,closest-corner,red,green,blue);/*Opera*/
background: -moz-radial-gradient(60% 55%,closest-corner,red,green,blue);/*FireFox*/
background: radial-gradient(60% 55%,closest-corner,red,green,blue);/*标准的写法*/
}
.div4{
background: -webkit-radial-gradient(60% 55%,farthest-corner,red,green,blue);/*Safari*/
background: -o-radial-gradient(60% 55%,farthest-corner,red,green,blue);/*Opera*/
background: -moz-radial-gradient(60% 55%,farthest-corner,red,green,blue);/*FireFox*/
background: radial-gradient(60% 55%,farthest-corner,red,green,blue);/*标准的写法*/
}
显示效果
重复的径向渐变
repeating-radial-gradient()函数用于重复径向渐变
div{
background: -webkit-repeating-radial-gradient(red,green 10%,blue 15%);/*Safari*/
background: -o-repeating-radial-gradient(red,green 10%,blue 15%);/*Opera*/
background: -moz-repeating-radial-gradient(red,green 10%,blue 15%);/*FireFox*/
background: repeating-radial-gradient(red,green 10%,blue 15%);/*标准的写法*/
}
显示效果
