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度角，颜色变化红->黄->绿。
图片说明