为了浏览器兼容新的css3属性
[gradient 渐变]
CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. background属性
线性渐变 linear-gradient
[ linear 线的,直线的 ]
语法:
{background: linear-gradient( 方向, 颜色1, 颜色2, ...);} 至少两个或两个以上的颜色
div:nth-child(1) {
background: linear-gradient(to right bottom, red, green, blue, purple);
}
div:nth-child(2) {
background: linear-gradient(to right, red, green, blue, purple);
}
div:nth-child(3) {
background: linear-gradient(180deg, red, green, blue, purple);
}
说明:
方向:
1.使用方位名词 ;
默认为to bottom,即从上向下的渐变;
可以设置为 to left(从右到左)、top right(从左到右)、to bottom(从上到下 默认值)、to top(从下到上) , to right bottom,(从左上到右下);等等
2. 使用角度(deg);
background :{ linear-gradient(90deg, red, blue) }
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
径向渐变 radial-gradient 不兼容无效加浏览器私有前缀 例: -webkit-
radial [辐射状的]
div {
width: 200px;
height: 200px;
border: 2px skyblue solid;
float: left;
margin: 0 20px;
}
div:nth-child(1) {
width: 300px;
background: -webkit-radial-gradient(
/* 改变默认的形状 */ circle,
red,
green,
blue,
purple
);
}
div:nth-child(2) {
background: -webkit-radial-gradient(
/* 大小,最远/最近边, 最远/最近角 */ farthest-side,
red,
green,
blue,
purple
);
}
div:nth-child(3) {
background: -webkit-radial-gradient(
/* 改变中心位置,默认是center center,可以用百分比或px值(元素的宽高) */
right bottom,
red,
green,
blue,
purple
);
}
径向渐变是从“一个点”向四周的颜色渐变
语法:
{ background: radial-gradient(圆心位置, 形状, 大小, 颜色1,颜色2, 颜色3;}
圆心位置、形状、大小、颜色
注:渐变大小和渐变形状不能一起使用。
圆心位置: 渐变起点的位置,可以为百分比/px/方位名词,默认是图形的正中心。
形状: 渐变的形状,ellipse表示椭圆形(默认值),circle表示圆形。如果元素形状为正方形的元素,也显示为圆形。
size:渐变的大小,即渐变到哪里停止,它有四个值。
closest-side:最近边; [closest 最近的] [side 边,侧]
farthest-side:最远边;
closest-corner:最近角; [farthest 最远的] [corner 角,墙角]
farthest-corner:最远角
div {
background: -webkit-radial-gradient(
60% 40%,
/* 最近边 */
closest-side,
blue,
green,
yellow,
black
);
}
div {
background: -webkit-radial-gradient(
60% 40%,
/* 最远边 */
farthest-side,
blue,
green,
yellow,
black
);
}
div {
background: -webkit-radial-gradient(
60% 40%,
/* 最近角 */
closest-corner,
blue,
green,
yellow,
black
);
}
div {
background: -webkit-radial-gradient(
60% 40%,
/* 最远角 */
farthest-corner,
blue,
green,
yellow,
black
);
}
1.重复性线性渐变
0%到10% 是red到 yellow ; 10%到20% 是yellow到绿; 重复五次;
div{
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
2.重复性径向渐变
0%到20% 是red到 yellow ; 20%到50% 是yellow到绿; 重复两次;
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }