CSS样式表基础（十九）——颜色渐变I
27、CSS3 线性渐变
语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
方向可以是：
to bottom（向底部）、
to top（向顶部）、
to right（向右）、
to left（向左）、
to bottom right（向右下）等等……
还可以是一个角度。
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
例
<html>
<head>
<style>
#div1{
width: 300px; height: 100px;
background: linear-gradient(red, #ff0, green);
}
#div2{
width: 400px; height: 100px;
background: linear-gradient(to right, red, #ff0 60%, rgba(0,255,0,0.8));
}
#div3{
width: 400px; height: 100px;
background: linear-gradient(to bottom right, red, #ff0, green);
}
#div4{
width: 300px; height: 100px;
background: linear-gradient(45deg, red, #ff0, green);
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
</body>
</html>div1： linear-gradient(red, #ff0, green);表示从上到下的渐变变化为 红->黄->绿
div2：linear-gradient(to right, red, #ff0 60%, rgba(0,255,0,0.8));表示盒子内背景颜色的渐变是向右边的，顺序红->黄->绿，黄色占总渐变的60%。
div3：linear-gradient(to bottom right, red, #ff0, green);表示背景色渐变往右下方，也就是按盒子对角线的方向变化，颜色变化依然是红->黄->绿。
div4：linear-gradient(45deg, red, #ff0, green);45deg表示渐变方向为45度角，颜色变化红->黄->绿。
投递TP-LINK等公司7个岗位