CSS3 定义了两种类型的渐变(gradients):
-
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
-
径向渐变(Radial Gradients)- 由它们的中心定义
1. CSS3 线性渐变(以标准语法为例)
-
从上到下的线性渐变: background: linear-gradient(red, pink); /* 标准的语法 */
-
从左到右的线性渐变: background: linear-gradient(to right, red , pink); /* 标准的语法 */
-
从左上角到右下角的线性渐变: background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
-
使用角度的线性渐变: background: linear-gradient(30deg, red, blue); /* 标准的语法 */
-
使用透明度(transparent):background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
-
重复的线性渐变 :background: repeating-linear-gradient(red, yellow 10%, green 20%);
tip:css渐变最少使用两种颜色节点
/* 从上到下的线性渐变: */
.div2{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(red, pink); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, pink); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, pink); /* Firefox 3.6 - 15 */
background: linear-gradient(red, pink); /* 标准的语法 */
}
/* 从左到右的线性渐变: */
.div3{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(left, red , pink); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, pink); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, pink); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , pink); /* 标准的语法 */
}
/*从左上角到右下角的线性渐变: */
.div4{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
/*使用角度的线性渐变: */
.div5{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(30deg, red, blue); /* 标准的语法 */
}
/* 使用透明度(transparent) */
.div6{
width: 200px;
height: 200px;
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
/* 重复的线性渐变 */
.div7{
width: 200px;
height: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
2.径向渐变(以标准语法为例)
- 颜色结点均匀分布的径向渐变: background: radial-gradient(red, green, blue);
- 颜色结点不均匀分布的径向渐变:background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
- 形状为圆形的径向渐变:shape 参数定义了形状。(circle 或 ellipse。) background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
- 带有不同尺寸大小关键字的径向渐变:(closest-side farthest-side closest-corner farthest-corner) background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
- 重复的线性渐变:background: repeating-radial-gradient(red, yellow 10%, green 15%);
/* 颜色结点均匀分布的径向渐变: */
.div2{
width: 200px;
height: 200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
/* 颜色结点不均匀分布的径向渐变:*/
.div3{
width: 200px;
height: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
/*形状为圆形的径向渐变:shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。 */
.div4{
width: 200px;
height: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
/*带有不同尺寸大小关键字的径向渐变:closest-side
farthest-side
closest-corner
farthest-corner*/
.div5{
width: 200px;
height: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
/* 重复的线性渐变 */
.div7{
width: 200px;
height: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}