CSS3 漸層（Gradients）

CSS3 漸層（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用圖像來實現這些效果。但是，透過使用 CSS3 漸層（gradients），你可以減少下載的事件和寬頻的使用。此外，漸層效果的元素在放大時看起來效果更好，因為漸層（gradient）是由瀏覽器產生的。

CSS3 定義了兩種類型的漸變（gradients）：

-----線性漸層（Linear Gradients）- 向下/向上/向左/向右/對角線方向

-----徑向漸層（Radial Gradients）- 由它們的中心定義

CSS3 線性漸層
#
為了創造一個線性漸變，你必須至少定義兩個顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設定一個起點和一個方向（或一個角度）。

語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

## 線性漸變- 從左到右右

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(left,red,green,white,orange, blue); 
    }  
</style>
</head>
  <body>
  <div></div>
 </body>
</html>

線性漸變- 由上往下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(red,green,white,orange, blue); 
    }  
</style>
</head>
<body>
  <div></div>
</body>
</html>

線性漸變- 對角線
#

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
  div{
     width: 300px;
     height: 300px;
     margin: 0 auto;
     border: 1px solid;
     background: -webkit-linear-gradient(45deg, red, white, blue); 
    }  
</style>
</head>
<body>
  <div></div>
</body>
</html>

使用角度漸層
如果你想要在漸層的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。

語法background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平線和漸層線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。

但是，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標準，即0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標準角度，y為非標準角度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    #grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad2 {
    height: 100px;
    background: -webkit-linear-gradient(45deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(45deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(45deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(45deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad3 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, green, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, green, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, green, blue); /* 标准的语法（必须放在最后） */
    }
</style>
</head>
<body>
    <h3>线性渐变 - 使用不同的角度</h3>
    <div id="grad1" style="color:white;text-align:center;">0deg</div><br>
    <div id="grad2" style="color:white;text-align:center;">45deg</div><br>
    <div id="grad3" style="color:white;text-align:center;">90deg</div><br>
    <div id="grad4" style="color:white;text-align:center;">-90deg</div>
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

使用多個顏色結點

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    #grad1 {
        height: 200px; 
          width: 300px;
        background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
    }
    #grad2 {
        height: 200px;
          width: 300px;
        background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
    }
    #grad3 {
        height: 200px;
          width: 300px;
        background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
        background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
    }
</style>
</head>
<body>
    <h3>颜色结点（均匀分布）</h3>
    <div id="grad1"></div>
    <h3>颜色结点（均匀分布）</h3>
    <div id="grad2"></div>
    <h3>颜色结点（不均匀分布）</h3>
    <div id="grad3"></div>
</body>
</html>

#注意：當未指定百分比時，顏色結點不會自動均勻分佈。

使用透明度（Transparency）

CSS3 漸層也支援透明度（transparency），可用於創造減弱變淡的效果。

為了增加透明度，我們使用 rgba() 函數來定義顏色結點。 rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
      width: 300px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
     }
</style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

為了加入透明度，我們使用 rgba() 函數來定義顏色結點。 rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

重複的線性漸變

repeating-linear-gradient() 函數用於重複線性漸變

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
      width: 400px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

CSS3 徑向漸層

徑向漸層由它的中心定義。

為了創造一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸層的中心、形狀（原型或橢圓形）、大小。預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

徑向漸層 - 色彩結點均勻分佈（預設）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

徑向漸層 - 色彩結點不均勻分佈

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red 9%, yellow 19%, blue 60%); /* Safari 9.1 - 6.0 */
    background: -o-radial-gradient(red 9%, yellow 19%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 9%, yellow 19%, blue 60%); /* Firefox 3.6 - 19 */
    background: radial-gradient(red 9%, yellow 19%, blue 60%); /* 标准的语法（必须放在最后） */
     }
</style>
</head>
<body>
  <div id="grad1"></div>
</body>
</html>

不同尺寸大小關鍵字的使用

size 參數定義了漸層的大小。它可以是以下四個值：

closest-side

farthest-side

closest-corner

farthest-corner

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-side,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad2 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-side,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad3 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, closest-corner,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
#grad4 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* Firefox 3.6 - 15 */
    background: radial-gradient(60% 55%, farthest-corner,pink,green,yellow,#0ff); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>
</body>
</html>

重複的徑向漸層

repeating-radial-gradient() 函數用於重複徑向漸層

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#grad1 {
    height: 300px;
    width: 280px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, blue 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, blue 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, blue 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, blue 15%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
   <div id="grad1"></div>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 0 auto; border: 1px solid; background: -webkit-linear-gradient(45deg, red, white, blue); } </style> </head> <body> <div></div> </body> </html>

提交重置程式碼

自動運行