css3 渐变
渐变分为:线性渐变,径向渐变。
css3 渐变: IE10+,chrome26+(10.0 加上-webkit-),firefox16+(3.6 -moz-),safari6.1+(5.1 -webkit-),opera12.1+(11.6 -o-)
线性渐变 linear gradients
语法:linear-gradient(direction,color-stop1,color-stop2,...);
线性渐变默认direction 是从上到下。
因此方向为从上到下:linear-gradient(color-stop1,color-stop2,...);
<style type="text/css">
div{
width: 800px;
height: 500px;
background: -webkit-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: linear-gradient(red,blue);
}
</style>
从左到右:
background: -webkit-linear-gradient(begin-direction,red,blue);
background: -moz-linear-gradient(end-direction,red,blue);
background: -o-linear-gradient(end-direction,red,blue);
background: linear-gradient(to end-direction,red,blue);
.div2{
width: 800px;
height: 500px;
background: -webkit-linear-gradient(left,red,blue);
background: -moz-linear-gradient(right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);
}
对角渐变
background: -webkit-linear-gradient(begin-level begin-vertical,red,blue);
background: -moz-linear-gradient(end-level end-vertical,red,blue);
background: -o-linear-gradient(end-level end-vertical,red,blue);
background: linear-gradient(to end-level end-vertical,red,blue);
线性渐变 角度、结点、透明
使用角度的渐变:background:linear-gradient(angle,color-stop1,color-stop2,...)
角度说明:
.div4{
width: 800px;
height: 500px;
background: -webkit-linear-gradient(45deg,red,white,blue);
background: -moz-linear-gradient(45deg,red,white,blue);
background: -o-linear-gradient(45deg,red,white,blue);
background: linear-gradient(45deg,red,white,blue);
}
颜色结点 语法 background:linear-gradient(color1 length|percentage,
color2 length|percentage,
...)
.div5{
width: 800px;
height: 500px;
background: -webkit-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
background: -moz-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
background: -o-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
background: linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
}
颜色透明度
.div6{
width: 800px;
height: 500px;
background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
background: -moz-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
background: -o-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
background: linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
}
线性渐变 - 重复渐变
语法: background: repeating-linear-gradient(color1 length|percentage,
color2 length|percentage,
...)
.div7{
width: 800px;
height: 500px;
background: -webkit-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
background: -o-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
background: repeating-linear-gradient(90deg,red 0%, orange 10%, red 30%);
}
使用重复渐变,模版信纸:
body{
background-image:-webkit-repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
/*指定背景图片大小*/
background-size: 100% 30px;
position: relative;
}
径向渐变
语法: radial-gradient(center,shape size,start-color, ..., end-color)
div{
width: 800px;
height: 500px;
background: -webkit-radial-gradient(red,blue);
background: -moz-radial-gradient(red,blue);
background: -o-radial-gradient(red,blue);
background: radial-gradient(red,blue);
}
设置形状
语法: background: radial-gradient(shape,start-color, ..., end-color
shape 可取的值:
circle —— 圆形
ellipse —— 椭圆(默认)
尺寸大小(渐变的尺寸)
语法: background: radial-gradient(size,color1,color2 ...,)
size 可取值:
closest-side 最近边
closest-corner 最近角
farthest_side 最远边
farthest-corner 最远角
圆心位置
语法:background: radial-gradient(x-percentage y-percentage,color1,color2)
径向渐变重复渐变
语法:background:repeating-radial-gradient(color1 length|percentage,
color2 length|percentage,
...)
渐变的一个小例子:
<style type="text/css">
.div{
width: 800px;height: 800px;background: #abcdef;background-size: 100px 100px;
background-image: -webkit-linear-gradient(45deg,red 25%,transparent 25%),
-webkit-linear-gradient(-45deg,red 25%,transparent 25%),
-webkit-linear-gradient(45deg,transparent 75%,red 75%),
-webkit-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -moz-linear-gradient(45deg,red 25%,transparent 25%),
-moz-linear-gradient(-45deg,red 25%,transparent 25%),
-moz-linear-gradient(45deg,transparent 75%,red 75%),
-moz-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -o-linear-gradient(45deg,red 25%,transparent 25%),
-o-linear-gradient(-45deg,red 25%,transparent 25%),
-o-linear-gradient(45deg,transparent 75%,red 75%),
-o-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: linear-gradient(45deg,red 25%,transparent 25%),
linear-gradient(-45deg,red 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,red 75%),
linear-gradient(-45deg,transparent 75%,red 75%);
}
</style>
下一篇: vue 分环境打包配置