前端入門-css 徑向漸變

篇我們將著重介紹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/

言

“等風來不如追風去，追逐的過程就是人生的意義”。

借朋友吉言，“2018在頭條，2019成為頭條”，這就是我2019的目標，我已經在追風的路上。你呢？不要停下腳步，繼續前行吧。

今天來個實用的小知識，看下圖：

CSS3徑向漸變實現優惠券波浪造型

很多人看到左右的波浪邊框，第一想法，應該是用圖片實現。現在我們就打破這一想法，用CSS搞定這個效果。

radial-gradient()

radial-gradient() 函數用徑向漸變創建 "圖像"。徑向漸變由中心點定義。為了創建徑向漸變你必須設置兩個終止色。

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

CSS3徑向漸變實現優惠券波浪造型

波浪造型的產生

<div class="coupon"></div>

這里用radial-gradient繪制一個圓，設置left為1px，top為8px，形成半圓。

.coupon { 
 position: relative; 
 width: 400px; 
 height: 160px; 
 margin: 50px auto; 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 }

CSS3徑向漸變實現優惠券波浪造型

看看原本是這樣，這里的left是8px

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 8px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 ... 
 }

CSS3徑向漸變實現優惠券波浪造型

設置背景大小，y軸默認平鋪，x軸不允許平鋪，形成多個半圓，造就波浪造型。

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-repeat-x: no-repeat; 
 ... 
 }

CSS3徑向漸變實現優惠券波浪造型

同理，我們添加右邊波浪，

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px), 
 radial-gradient( 
 circle at 199px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-position: 0 0, 200px 0; 
 background-repeat-x: no-repeat; 
}

CSS3徑向漸變實現優惠券波浪造型

添加文字

<div class="coupon">50元</div>

用:before偽類，制作中間的虛線，:after偽類，添加“立即領取”文字。同時添加金額（50元）樣式。

.coupon { 
 ... 
 font-size: 60px; 
 color: #fff; 
 font-weight: bold; 
 line-height: 160px; 
 padding-left: 60px; 
 box-sizing: border-box; 
 cursor: pointer; 
} 
.coupon::before { 
 position: absolute; 
 content: ""; 
 left: 240px; 
 top: 0; 
 bottom: 0; 
 width: 0; 
 border-left: 1px dashed #fff; 
} 
.coupon::after { 
 position: absolute; 
 content: "立即領取"; 
 font-size: 26px; 
 width: 70px; 
 top: 50%; 
 right: 2%; 
 transform: translate(-50%, -50%); 
 line-height: 40px; 
 letter-spacing: 5px; 
}

CSS3徑向漸變實現優惠券波浪造型

演示地址：CSS3徑向漸變實現優惠券波浪造型

整合營銷服務商

前端入門-css 徑向漸變

徑向漸變 —— radial-gradient

最基本的徑向漸變

改變形狀

改變圓心位置

使用多個顏色

改變顏色的結束位置

創建實線

色帶和條紋

改變漸變的半徑長度

最后

言

radial-gradient()

波浪造型的產生

添加文字

推薦文章

您的項目需求