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}