CSS屬性之漸變屬性（gradient）
漸變分為線性漸變和徑向漸變，所謂漸變就是幾種顏色之間的平穩過渡。
線性漸變
線性漸變（linear-gradient）
實現線性漸變，你至少需要定義兩種顏色的結點，這兩種結點就是你想平穩過渡的顏色，即：其中一種顏色結點為起點，另一種顏色結點為結束點。
書寫：
background: linear-gradient(color1,color2);
color1為起點結點，color2為結束點結點。
同時也可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，或者從右至左漸變，預設情況下是從上至下漸變的。
書寫：
background: linear-gradient(direction,colro1,color2);
direction表示漸變的方向，此值直接寫方向的起點即可，如：漸變方向為從左至右，直接寫left即可，漸變方向為從下至上，直接寫bottom即可。
當然也可以對角漸變，如：從左上角到右下角，書寫為background: linear-gradient(left top,color1,color2);
預設漸變方向是從上至下漸變：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>漸變(gradients)屬性</title> <style> div { width: 400px; height: 200px; background: -webkit-linear-gradient(red,blue); background: -o-linear-gradient(red,blue); background: -moz-linear-gradient(red,blue); background: -mos-linear-gradient(red,blue); background: linear-gradient(red,blue); } </style> </head> <body> <div></div> </body> </html>
效果如下：
現在定義漸變方向為從右至左：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>漸變(gradients)屬性</title> <style> div { width: 400px; height: 200px; background: -webkit-linear-gradient(right,red,blue); background: -o-linear-gradient(right,red,blue); background: -moz-linear-gradient(right,red,blue); background: -mos-linear-gradient(right,red,blue); background: linear-gradient(right,red,blue); } </style> </head> <body> <div></div> </body> </html>
效果如下：
對角漸變--右下角至左上角：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>漸變(gradients)屬性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -mos-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
對角漸變--右下角到左上角：
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(right bottom,red,blue);
background: linear-gradient(right bottom,red,blue);
}效果如下：
角度漸變
如果還想更多地控制漸變方向，可以改變漸變的角度。 書寫： background: linear-gradient(angle,color1,color2); 角度是指水平線與漸變線之間的角度，是逆時針的。<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>漸變(gradients)屬性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(0deg,red,blue);
background: linear-gradient(0deg,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
漸變時，也可以使用多個顏色。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>漸變(gradients)屬性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left,red,blue,yellow,orange);
background: -o-linear-gradient(left,red,blue,yellow,orange);
background: -mos-linear-gradient(left,red,blue,yellow,orange);
background: -moz-linear-gradient(left,red,blue,yellow,orange);
background: linear-gradient(left,red,blue,yellow,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
在漸變中使用透明度
CSS3 漸變也支援透明度（transparency），可用於建立減弱變淡的效果。
為了新增透明度，我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後一個引數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>漸變(gradients)屬性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如下：
重複的線性漸變
repeat-linear-gradient函式用於建立重複的線性漸變
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>漸變(gradients)屬性</title>
<style>
div {
width: 400px;
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
徑向漸變
徑向漸變是由中心向外漸變的。可以定義它中心(預設漸變是中心是center)、形狀（原型或者橢圓形）、大小等。
書寫：background: radial-gradient(center,size,start-color,last-color);
均勻漸變：
div {
width: 400px;
height: 200px;
background: -webkit-radial-gradient(red, yellow, green);
}效果如下：
以上是均勻漸變，也可以是非均勻漸變，改變漸變顏色的比例就行；還有重複漸變也是可以的。
對於ie6~ie9漸變相容問題：
對於ie6~ie9是不支援漸變屬性的，使用濾鏡來代替漸變，實現漸變的效果。
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='rgba(246,237,237,0)',endColorstr='rgba(246,237,237,0)'); /* 針對IE的漸變，使用濾鏡的實現。 */
其中：GradientType定義漸變的方式，屬性值為"1"，表示水平方向上的漸變，屬性值為"0"，表示垂直方向上的漸變。
對於ie9，單獨處理濾鏡：
:root{filter:noen}