CSS漸變的簡單使用

前言

重拾css後的文章，在觀看了慕課網上的視頻《重拾CSS的樂趣》中，看到了一些有意思的css效果。想起當初自己初學CSS3時畫的哆啦A夢，總結了一番css製作的各種圖形。漸變效果是在實現弧邊三角的時候學習的。

分享一下CodePen中的代碼效果：
弧形demo
三角形demo
多重邊框demo

一、漸變簡介

漸變是兩種或多種顏色之間的平滑過渡。在創建漸變的過程中，可以指定多箇中間顏色值，這個值稱爲色標。每個色標包含一種顏色和一個位置，瀏覽器從每個色標的顏色淡出到下一個，以創建平滑的漸變。

漸變可以應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變相當於背景圖片，在理論上可在任何使用url() 值的地方採用，比如最常見的background-image、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-image。但直到目前爲止，僅在背景圖片中得到最完美的支持。

二、線性漸變

沿着一條直線的顏色過渡效果：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸：

1. 基礎語法

最新的瀏覽器都已經支持標準寫法

 -webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)  //webkit引擎Chrome
 -moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Gecko引擎Firefox
 -o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Presto引擎Opera
 -ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Trident引擎IE
 linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)//w3c標準

其中，point指向、angle角度代表方向，stop、color-stop代表各個顏色。

關鍵字寫法：

 background-image: -webkit-linear-gradient(left,blue,white);
 background-image: -moz-linear-gradient(left,blue,white);
 background-image: -o-linear-gradient(left,blue,white);
 background-image: -ms-linear-gradient(left,blue,white);
 background-image: linear-gradient(to right,blue,white);

有前綴的，第一個參數表示起點，第二個參數表示起點顏色，第三個參數表示終點顏色
標準寫法，第一個參數表示方向，第二個參數表示起點顏色，第三個參數表示終點顏色

關鍵字有：left、right、top、bottom 對兩者都有效
left top、left bottom、right top、right bottom等組合只對標準有效

角度寫法：

有前綴的：

1. 0deg、360deg、-360deg→left
2. 90deg、-270deg →bottom
3. 180deg -180deg → right
4. 270deg -90deg → top

標準寫法：

1. 0deg、360deg、-360deg→to top
2. 90deg、-270deg →to right
3. 180deg -180deg → to bottom
4. 270deg -90deg → to left

多色漸變：

在第二與第三個參數之間，即起點顏色與終點顏色之間，添加多個顏色參數

background-image: -webkit-linear-gradient(left,blue,red,white);
background-image: -moz-linear-gradient(left,blue,red,white);
background-image: -o-linear-gradient(left,blue,red,white);
background-image: -ms-linear-gradient(left,blue,red,white);
background-image: linear-gradient(to right,blue,red,white);

2. 漸變長度

語法

只需在你定義的顏色後面加上空格，再加上長度，如百分比、px等。

background-image: linear-gradient(270deg,blue 0%,red 14%,green 100%);

效果如下：

0%到14%是藍到紅的漸變，14%到100%是紅到綠的漸變。

注意：如果定義的長度沒有佔滿整個寬度或高度，那麼起點或終點位置的空缺會由最近的顏色的純色填滿。

如：

background-image: linear-gradient(270deg,blue 10%,red 14%,green 80%);

效果如下：

3. 特殊思考

顏色點被稱爲色標。

• 如果兩個色標顏色是一樣的，那麼，就不會發生漸變，而是純色。
• 如果兩個不同顏色的點，不斷接近，直至重疊，漸變也就逐漸消失了。

由此，得出了類似斑馬線的彩色條紋，中間沒有漸變效果。

background-image: linear-gradient(
  270deg,
  blue 0%,blue 20%,
  red 20%,red 40%,
  green 40%,green 60%,
  orange 60%,orange 80%,
  yellow 80%,yellow 100%
);

效果如下：

實踐CodePen例子：線性漸變

三、徑向漸變

CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿着一條直線軸變化，而是從一個起點朝所有方向混合。比線性漸變更復雜。

1. 基礎語法

最新的瀏覽器都已經支持標準寫法

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);//webkit引擎Chrome
-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);//Gecko引擎Firefox
-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*); //Presto引擎Opera
-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);  //Trident引擎IE
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);//w3c標準

其中，postion、angle代表方向，shape、size代表形狀大小，color-stop代表各個顏色。

參數

• position
  <length>：用長度值指定徑向漸變圓心的橫座標或縱座標。可以爲負值。
  <percentage>：用百分比指定徑向漸變圓心的橫座標或縱座標。可以爲負值。
  left：設置左邊爲徑向漸變圓心的橫座標值。
  center：設置中間爲徑向漸變圓心的橫座標值或縱座標。
  right：設置右邊爲徑向漸變圓心的橫座標值。
  top：設置頂部爲徑向漸變圓心的縱標值。
  bottom：設置底部爲徑向漸變圓心的縱標值。

• shape
  沒有默認值，會根據容器選擇。
  circle：如果<size>和<length>大小相等，那麼徑向漸變是一個圓形，也就是用來指定圓形的徑向漸變。
  ellipse：如果<size>和<length>大小不相等，那麼徑向漸變是一個橢圓形，也就是用來指定橢圓形的徑向漸變。

• size
  closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊；
  closest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角；
  farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊；
  farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角；默認值
  <length>：指定圓的直徑或橢圓的水平和垂直直徑。

用法

• 最簡單
  標準寫法與加前綴一樣

  background-image: radial-gradient(red,blue);

注意：此時形狀會根據你的容器來選擇圓形或者橢圓。

• 加上形狀
  標準寫法與加前綴一樣

  background-image: radial-gradient(circle,red,blue);//圓形
  background-image: radial-gradient(ellipse,red,blue);//橢圓

注意：只加形狀的話，在正方形容器中都會顯示爲圓形

• 加上大小
  加前綴寫法測試無法添加長度或百分比大小，會與position設置位置的方式衝突，只能添加關鍵字。
  下面以標準寫法爲例，大小可以使用長度，百分比，關鍵字。

  background-image: radial-gradient(20px,red,blue);
  background-image: radial-gradient(20px 50px,red,blue);

一個值表示圓形直徑，兩個值表示水平和垂直直徑。

注意：這時，添加關鍵字circle和ellipse的話，在大小的前面後面是一樣的，但是必須以空格形式，如ellipse 20px 50px，且circle對應一個值和ellipse兩個值，不然會出錯。個人認爲沒必要添加。

• 加上方向
  標準寫法與加前綴寫法有所差別，方向可以使用長度，百分比，關鍵字。

  background-image:-webkit-radial-gradient(20px 20px,red,blue);
  background-image: radial-gradient(20px at 20px 20px,red,blue);

注意：加前綴寫法的形狀要寫在方向的後面，如：20px 20px,circle，以逗號隔開。標準寫法的形狀大小寫在方向的前面，如：ellipse 20px 50px at 20px 20px，以空格隔開。

位置圖

• 多色漸變
  標準寫法與加前綴寫法一樣

  background-image: radial-gradient(circle,red,blue,yellow,orange,green);

漸變長度

同前面的線性漸變。

特殊的思考

如前面的線性漸變，通過設置色標的距離，能夠做出特別的效果。

• 同心彩環

background-image: radial-gradient(
  circle,
  red 0%,red 20%,
  blue 20%,blue 40%,
  yellow 40%,yellow 60%,
  orange 60%,orange 80%,
  green 80%,green 100%
);

效果如下：

• 挖掉圓

background-image: radial-gradient(
  circle,
  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,
  rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%
);

設置透明度使得其不會覆蓋其他元素。

效果如下：

• 弧邊三角形

background-image: radial-gradient(
  at top right,
  rgba(0,0,0,0) 71%,rgba(0,0,0,0) 71%,
  blue 0,blue 0
);

效果如下：

實踐CodePen例子：徑向漸變

四、重複漸變

通過repeating-linear-gradient和repeating-radial-gradient可以直接實現重複的漸變效果。

在沒有重複漸變的屬性之前，主要通過重複背景圖像（使用background-repeat）創建線性重複漸變，但是沒有創建重複的徑向漸變的類似方式。

1. 重複線性漸變

語法跟線性漸變是一樣的，但是使用百分比設置色標的位置沒有多大的意義，但使用像素和其他的單位，重複線性漸變可以創建一些很酷的效果。

  background-image: repeating-linear-gradient(red,green 40px, orange 80px); 

效果如下圖所示：

2. 重複徑向漸變

  background-image: repeating-radial-gradient(red,green 40px, orange 80px);

效果如下圖所示：

3. 實例——製作記事本紙張效果

每張紙都有橫線條，左邊有兩條豎線從頂部延伸到底部。

html,
body { 
  margin: 0; 
  padding: 0; 
  height: 100%;
}
body {
  background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
  background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px ); 
  background-size: 100% 30px; 
  position: relative;
}
body:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 4px;
  border-left: 4px double #FCA1A1;
  position: absolute;
  left: 30px;
}

效果如下：

參考

大漠老師的文章：1. 再說CSS3漸變——線性漸變 2. 再說CSS3漸變——徑向漸變

說明：原文年代較爲久遠，有部分不符合實踐，已經在本文中修改，望採納。