css3线性渐变
<!DOCTYPE html>
<html>
<head>
<title>线性渐变</title>
<style type="text/css">
div{
width: 150px;
height: 150px;
margin-top: 20px;
}
/*渐变分线性渐变和径向渐变
线性渐变：linear-gradient();
1.渐变必须有两种及以上颜色
2.css中渐变是作为元素的background-image出现的
3.线性渐变语法为(终点/方向,颜色1 渐变的位置1,颜色2 渐变的位置2,......)
4.终点/方向可以是to top/to left/to right/to bottom,to left top....
5.终点/方向还可以是角度 比如0deg to top*/
.first{
background-image: linear-gradient(to top,yellow,pink);
}
.second{
/*需要注意的是第一个和最后一个色标并没有指定一个位置; 位置值0％和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部
*/
background-image: linear-gradient(to right bottom,green,pink 80%,black)
}
.third{
/*正值的角度是以顺时针来的
负值的角度以逆时针来的
*/
background-image: linear-gradient(-20deg,skyblue,gold,purple);
}
.forth{
/*rgba()也可以作为颜色放在渐变里使用
/*rgba:() 4个值 最后一个是模糊度*/*/
background-image: repeating-linear-gradient(to left,blue,rgba(100,0,0,.3),gold 10%);
width: 1000px;
}
.fifth{
/*transparent也可以作为颜色在渐变里使用
渐变linear-gradient后面和括号中间不能加空格*/
background-image: repeating-linear-gradient(to bottom,#ccc,transparent 7%,transparent 15%);
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="forth"></div>
<div class="fifth"></div>
</body>
</html>
