一篇文章帶你瞭解CSS 漸變知識

CSS3 漸變使您可以是你的背景顏色在兩個或多個顏色之間平滑過渡。css

早些時候，你必須使用圖像實現這些效果。然而, 經過使用CSS3漸變能夠減小下載時間和帶寬的使用. 此外，縮放的元素在縮放時看起來更好，由於漸變是由瀏覽器生成的。html

1、瀏覽器支持

表中的數字指定徹底支持該屬性的第一個瀏覽器版本。（來源於百度）web

數字後面的 -webkit- 或者 -moz- 使用時須要指定前綴。瀏覽器

屬性	Chrome	Firefox	Safari	Opera	IE
linear-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

2、CSS3 線性漸變(向下/向上/向左/向右/傾斜)

要建立線性漸變，必須定義至少兩個顏色中止。顏色中止是你想要渲染平滑過渡之間的顏色。您還能夠設置一個起始點和一個方向（或角度）和漸變效果。網絡

語法：函數

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

HTML代碼：學習

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>

</head>
<body>

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

例如：網站

線性漸變 - 上到下code

顯示從頂部開始的線性漸變。它從開始的紅色，過渡到黃色:htm

<style>
    #grad1 {
        height: 200px;
        background: blue; /* 對於那些不支持漸變的瀏覽器 */
        background: -webkit-linear-gradient(blue, yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(blue, yellow); /* 標準語法 (必須是最後一個) */
    }
</style>

線性漸變 - 左到右

例如：

顯示從左開始的線性漸變。它從開始的紅色，過渡到黃色

<style>
    #grad1 {
        height: 200px;
        background: blue; /* 對於那些不支持漸變的瀏覽器 */
        background: -webkit-linear-gradient(left, blue , yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(right, blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(right, blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(to right, blue , yellow); /* 標準語法 (必須是最後一個) */
    }
</style>

線性漸變 - 對角線

能夠經過指定水平和垂直起始位置來實現對角線漸變。

下面的示例顯示從左上角開始的線性漸變（到右下角）。它開始紅色，過渡到黃色:

<style>
    #grad1 {
        height: 200px;
        background: blue; /*對於那些不支持漸變的瀏覽器 */
        background: -webkit-linear-gradient(left top, blue, yellow); /* Safari 5.1 到 6.0 */
        background: -o-linear-gradient(bottom right, blue, yellow); /* Opera 11.1 到 12.0 */
        background: -moz-linear-gradient(bottom right, blue, yellow); /* Firefox 3.6 到 15 */
        background: linear-gradient(to bottom right, blue, yellow); /* 標準語法(必須是最後一個) */
    }
</style>

1. 使用角度

若是你想在漸變方向上有更多的控制，你能夠定義一個角度，而不是預約的方向（下、上、左、右等）。

語法

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

下面的示例演示如何使用在線性漸變上使用角度：

例如：

#grad {
  width: 100%;
  height: 100px;
  background: blue; /* 對於那些不支持漸變的瀏覽器 */
  background: -webkit-linear-gradient(-90deg, blue, yellow); /*  Safari 5.1 到 6.0 */
  background: -o-linear-gradient(-90deg, blue, yellow); /*  Opera 11.1 到 12.0 */
  background: -moz-linear-gradient(-90deg, blue, yellow); /*  Firefox 3.6 到 15 */
  background: linear-gradient(-90deg, blue, yellow); /*  標準語法 */
}

2. 使用多箇中止顏色

下面的示例顯示一個具備多箇中止顏色的線性漸變（從上到下）

例如：

#grad {
  background: blue; /* 對於那些不支持漸變的瀏覽器 */
  background: -webkit-linear-gradient(blue, yellow, green); /*  Safari 5.1 到 6.0 */
  background: -o-linear-gradient(blue, yellow, green); /*  Opera 11.1 到 12.0 */
  background: -moz-linear-gradient(blue, yellow, green); /*  Firefox 3.6 到 15 */
  background: linear-gradient(blue, yellow, green); /* 標準語法 */
}

下面實例演示瞭如何使用彩虹顏色和一些文原本建立一個線性漸變（從左到右）

漸變背景

例如：

#grad {
  background: blue; /*對於那些不支持漸變的瀏覽器 */
  /*  Safari 5.1 到 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /*  Opera 11.1 到 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /*  Fx 3.6 到 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Standard syntax */
  background: linear-gradient(到 right, red,orange,yellow,green,blue,indigo,violet);
}

3. 使用的透明度

CSS3 漸變也支持透明度，能夠用來建立淡入淡出效果。

添加透明度，咱們用rgba()函數來定義中止顏色。在rgba()函數的最後一個參數能夠從0到1的值，並定義顏色的透明度：0表示徹底透明，1表示徹底的顏色（不透明度）。

下面的示例顯示從左開始的線性漸變。它開始徹底透明，過渡到全紅色：

#grad {
  background: blue; /*  不支持漸變的瀏覽器 */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

4. 重複線性漸變

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

例如：

#grad {
  background: blue; /*  不支持漸變的瀏覽器 */
  /* Safari 5.1 到 6.0 */
  background: -webkit-repeating-linear-gradient(blue, yellow 10%, green 20%);
  /* Opera 11.1 到 12.0 */
  background: -o-repeating-linear-gradient(blue, yellow 10%, green 20%);
  /* Firefox 3.6 到 15 */
  background: -moz-repeating-linear-gradient(blue, yellow 10%, green 20%);
  /* Standard syntax */
  background: repeating-linear-gradient(blue, yellow 10%, green 20%);
}

3、CSS3 徑向漸變 (由中心定義)

徑向漸變是由其中心定義的。

要建立徑向漸變，還必須定義至少兩個中止顏色。

語法

background: radial-gradient(shape size at position, start-color, ..., last-color);

徑向漸變-均勻的間隔中止顏色 (默認)

下面的示例顯示一個徑向漸變，其顏色間隔均勻:

#grad {
  background: blue; /*  browsers that do not support gradients */
  background: -webkit-radial-gradient(blue, yellow, green); /* Safari 5.1 到 6.0 */
  background: -o-radial-gradient(blue, yellow, green); /*  Opera 11.6 到 12.0 */
  background: -moz-radial-gradient(blue, yellow, green); /*  Firefox 3.6 到 15 */
  background: radial-gradient(blue, yellow, green); /* Standard syntax */
}

徑向漸變-不一樣間隔的中止顏色

下面的例子顯示了一個具備不一樣間距的顏色漸變的徑向漸變:

#grad {
  background: blue; /*不支持漸變的瀏覽器 */
  background: -webkit-radial-gradient(blue 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(blue 5%, yellow 15%, green 60%); /*  Opera 11.6-12.0 */
  background: -moz-radial-gradient(blue 5%, yellow 15%, green 60%); /*  Firefox 3.6-15 */
  background: radial-gradient(blue 5%, yellow 15%, green 60%); /* Standard syntax */
}

1. 設置形狀

形狀參數定義形狀。它能夠取值圓或橢圓。默認值爲橢圓形。

下面的例子顯示了一個圓形的徑向漸變:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>項目</title>
    <style>
      #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(blue, yellow, green);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(blue, yellow, green);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(blue, yellow, green);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(blue, yellow, green);
        /* 標準語法（必須是最後一個） */
      }

      #grad2 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(circle, blue, yellow, green);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(circle, blue, yellow, green);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(circle, blue, yellow, green);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(circle, blue, yellow, green);
        /* 標準語法（必須是最後一個） */
      }
</style>
  </head>
  <body>

    <h3>徑向漸變-形狀</h3>

    <p><strong>橢圓（這是默認值）:</strong></p>
    <div id="grad1"></div>

    <p><strong>圓:</strong></p>
    <div id="grad2"></div>

    <p><strong>注意:</strong> Internet Explorer 9 和早期的版本不支持漸變。</p>

  </body>
</html>

2. 重複徑向漸變

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

例如：

#grad {
  background: blue; /*不支持漸變的瀏覽器*/
  /*  Safari 5.1 到 6.0 */
  background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
  /*  Opera 11.6 到 12.0 */
  background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
  /*  Firefox 3.6 到 15 */
  background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}

4、總結

本文基於html基礎, 經過對css中漸變效果作了詳細的講解，介紹來了常見的兩種漸變方式。經過豐富的案例讓你們可以更好的去了解，去體會漸變的用法，但願能夠幫助你們更好的學習。

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/ 想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/