CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS @charset 規(guī)則 CSS 函數(shù)(Functions)

CSS linear-gradient() 函數(shù)

CSS linear-gradient()函數(shù)創(chuàng)建一個(gè)圖像，該圖像表示顏色的線性漸變。結(jié)果是類型為<gradient>的CSS對(duì)象，這是<image>的特殊形式。

CSS 函數(shù)

在線示例

以下示例演示了從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色，再到藍(lán)色:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>線性漸變 - 頭部到底部</h3>
<p>從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色，再到藍(lán)色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。</p>
</body>
</html>

測(cè)試看看 ?/?

定義與用法

linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)線性漸變的 "圖像"。

為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

線性漸變示例

支持版本：CSS3

瀏覽器兼容性

表格中的數(shù)字表示支持該函數(shù)的第一個(gè)瀏覽器版本號(hào)。

"webkit" 或 "moz" 或 "o" 指定的數(shù)字為支持該函數(shù)的第一個(gè)版本號(hào)前綴。

函數(shù)
linear-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

CSS 語法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

值	描述
direction	用角度值指定漸變的方向（或角度）。
color-stop1, color-stop2,...	用于指定漸變的起止顏色。

在線示例

以下示例演示了從左側(cè)開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持線性的時(shí)候顯示 */
    background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h3>線性漸變 - 從左到右</h3>
<p>從左邊開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到黃色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及更早版本不支持漸變。</p>
</body>
</html>

測(cè)試看看 ?/?

在線示例

以下示例演示了從左上角到右下角的線性漸變:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
    height: 200px;
    background-color: red; /* 不支持線性的時(shí)候顯示 */
    background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>

<h3>線性漸變 - 對(duì)角</h3>
<p>從左上角開始（到右下角）的線性漸變。起點(diǎn)是紅色，慢慢過渡到黃色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及更早版本不支持漸變。</p>

</body>
</html>

測(cè)試看看 ?/?

在線示例

以下示例演示了線性漸變指定一個(gè)角度:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
  height: 100px;
  background-color: red; /* 瀏覽器不支持的時(shí)候顯示 */
  background-image: linear-gradient(0deg, red, yellow); 
}

#grad2 {
  height: 100px;
  background-color: red; /* 瀏覽器不支持的時(shí)候顯示 */
  background-image: linear-gradient(90deg, red, yellow); 
}
#grad3 {
  height: 100px;
  background-color: red; /* 瀏覽器不支持的時(shí)候顯示 */
  background-image: linear-gradient(180deg, red, yellow); 
}

#grad4 {
  height: 100px;
  background-color: red; /* 瀏覽器不支持的時(shí)候顯示 */
  background-image: linear-gradient(-90deg, red, yellow); 
}
</style>
</head>
<body>
<h3>線性漸變 - 使用不同的角度</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本不支持漸變。</p>
</body>
</html>

測(cè)試看看 ?/?

在線示例

以下示例演示了多個(gè)終止色:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
    height: 55px;
    background-color: red; /* 瀏覽器不支持的時(shí)候顯示 */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
漸變背景
</div>
<p><strong>注意：</strong> Internet Explorer 8 及更早版本不支持漸變。</p>
</body>
</html>

測(cè)試看看 ?/?

在線示例

以下示例使用了透明度:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
<style>
#grad1 {
    height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h3>線性漸變 - 透明度</h3>
<p>為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 8 及更早版本不支持漸變。</p>

</body>
</html>

測(cè)試看看 ?/?

CSS 教程: CSS3 漸變

CSS 函數(shù)

CSS @charset 規(guī)則 CSS 函數(shù)(Functions)