css3 漸變

ss3

ps: css越來越真正的像一門語言了，css已經有變量了，剛剛看到文檔中。一個實驗性質的功能。

漸變

漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變

線性漸變

線性漸變為向上，向下，向左，向右兩種漸變方式。

linear-gradient()函數

此為css的一個函數。線性漸變由一個軸即梯度線構成。其上的每個點具有兩種或多種顏色。其軸上的每個點具有獨立的顏色。為了構建出平滑的漸變，該函數還會構建一系列的著色線。每一條著色線的顏色還會取決于與之垂直相交的漸變線上的色點。

// 漸變軸45度，重藍色到紅色

linear-gradient(45deg, blue, red);

// 從右下到左上，藍色漸變到紅色

linear-gradient(to left top, blue, red);

// 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束

linear-gradient(0deg, blue, green 40%, red);

ps 透明度為rgba的最后一個參數

徑向漸變

徑向漸變由其中心點，邊緣形狀，輪廓，及其位置，和色值結束點組成。

徑向漸變由橢圓不斷的組成

第一個參數

第一個參數一般都可省，

closest-side

closest-corner

closest-side

farthest-corner

circle at 百分比

分開寫

百分號

篇我們將著重介紹css的徑向漸變，注意它和線性漸變的區別。

徑向漸變 —— radial-gradient

徑向漸變與線性漸變的不同之處在于它從一個點開始向外散發。CSS漸變通常用于模擬光源，我們知道它并不總是直的。這使得徑向漸變中顏色之間的過渡看起來更加自然。

為了創建一個徑向漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。

同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

語法：

參數說明：

<position>：用來定義徑向漸變的圓心位置，類似background-position，默認為center。可用關鍵字top、left、bottom、right、center、<length>、<percentage>或者同時使用2個關鍵字表示那個角如：top left（左上角）。

<angle>是角度，單位為deg。

<shape>：定義徑向漸變的形狀，有兩個可選值“circle”（圓形）和“ellipse”（橢圓）。

<size>：用來確定徑向漸變的半徑長度大小，默認值為“farthest-corner”，其他值：

closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；

<stop > = <color> [ <length> | <percentage>]:

<color>：指漸變得起止顏色。

<length>：用長度值指定起止色位置，不允許負值。

<percentage>：用百分比指定起止色位置。

最基本的徑向漸變

我們沒有聲明任何屬性，只設置了2種顏色，如下示例：

.gradient {
  background-image:
    radial-gradient(
      #fff000,
      #e52e71
    );
}

如上圖，顏色從中心點向外擴散，這就是最簡單的徑向漸變。

改變形狀

徑向漸變默認是ellipse（橢圓）的，我們還可以使漸變的形狀改變成circle（圓形），如下示例：

background-image:
    radial-gradient(
      circle,
      #fff000,
      #e52e71
    );

圓形的漸變

為了更好地觀察圓形和橢圓的區別，看如下動畫，從橢圓變成圓形：

改變圓心位置

用來定義徑向漸變的圓心位置，類似background-position，默認為center，除此還可以使用top、left、bottom、right、center、<length>、<percentage>等值。以及提供兩個命名值（例如 top center）的組合表示圓心的位置。

如下示例：

/*圓心在左邊中心*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圓心在左邊

/*圓心在右上角*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圓心在右上角

/*圓心在距離左邊100px位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 100px,
      #0000ff,
      #e52e71
    );
}

距左邊100px位置

/*圓心在距離左邊30%位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 30%,
      #0000ff,
      #e52e71
    );
}

左邊30%位置

使用多個顏色

徑向漸變也可以設置多個顏色的漸變,每種顏色以逗號隔開，如下示例：

background: radial-gradient(lime, red ,cyan, yellow );

改變顏色的結束位置

和線性漸變一樣，徑向漸變的顏色也可以改變其結束位置，如下示例：

background-image:
    radial-gradient(
      red 28px, blue 80%, green
    );

創建實線

使其相鄰顏色的結束位置一樣，如下示例：

background: radial-gradient(cyan 50%, red 50% );

色帶和條紋

創建一個徑向的色帶，如下示例：

.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}
或
.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

我們將上面的每種顏色的結束位置改成等于后面顏色的開始位置，就會形成徑向的條紋效果，如下示例：

background: radial-gradient(
       lime 20%, red 20% 45%, cyan 35% 70%, yellow 70% );

改變漸變的半徑長度

用來確定徑向漸變的結束形狀大小，默認值為“farthest-corner”，其他值：

closest-side：指徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指徑向漸變的半徑長度為從圓心到離圓心最遠的角；

如下示例：

html：

<div class="grid">
  <div class="item gradient4">farthest-side(離圓心最遠的邊)</div>
  <div class="item gradient2">closest-side(離圓心最近的邊)</div>
  <div class="item gradient1">farthest-corner(離圓心最遠的角)</div> 
  <div class="item gradient3">closest-corner(離圓心最近的角)</div>
</div>

css：

/*指定徑向漸變的半徑長度為從圓心到離圓心最遠的角*/
.gradient1 {
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最近的邊*/
.gradient2 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最近的角*/
.gradient3 {
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, #f8f8f8);
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊*/
.gradient4 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, #f8f8f8); 
}

效果如下：

如上所示，就是漸變半徑長度不同類型，注意這里如果圓心的位置在正中間，farthest-corner 和 closest-corner 一樣，同理 farthest-side 與 closest-side也一樣。

最后

到此已經介紹了徑向漸變的使用方法，下面將會繼續介紹其它漸變的使用方法，你可以關注我，繼續學習其它漸變知識。

其它相關文章：

css 線性漸變
css 徑向漸變
css 圓錐漸變
css 重復漸變

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

SS3豐富了色彩方面的內容，在純色的基礎上加入了漸變色的處理，線性漸變、徑向漸變在web色彩上可以起到畫龍點睛的效果。

在線咨詢

上一篇：快速學會html表單提交（php）
下一篇：讓Chrome“滾”得更流暢：微軟推薦Edge HTML風格滾動特性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商