【前端Talkking】CSS3系列——CSS3之徑向漸變初探

micstone發表於2018-01-19

1 徑向漸變radial-gradient

1.1 基本語法

線性漸變是沿著一條直線漸變，而徑向漸變則是沿著橢圓或者圓進行漸變。其標準語法如下：

radial-gradient(position, shape, size, color-stop);

1.2 引數詳細說明

position，指明徑向漸變的橢圓或者圓心的位置，支援的值有：left、right、top、bottom，也可以指定px或者百分比，預設是圖形的正中心。相應的對應關係如下：

top left	at 0% 0%
top center	at 0% 50%
top right	at 0% 100%
right center	at 100% 50%
right bottom	at 100% 100%
bottom center	at 100% 50%
left bottom	at 100% 0%
left center	at 0% 100%
center center	at 50% 50%

shape，指明徑向漸變的形狀，可以為circle或者ellipse，從字面意思可知，circle表示圓形，ellipse表示橢圓形。預設為ellipse。

如果設定為circle，則size不能設定為百分比，只能設定px，表示圓形的半徑，例如20px circle表示圓形的半徑為20px，可以用下圖來描述圓形的漸變形狀：
如果設定為ellipse，則size表示橢圓的水平半徑和垂直半徑，比如：20% 30%表示水平半徑20%（相對於元素的寬），30%表示垂直半徑為30%（相對於元素的高）的徑向漸變，可以用下圖來描述橢圓形的漸變形狀：

size，表示漸變的尺寸，即漸變到哪裡停止，除了支援百分比以及畫素，還支援以下四個關鍵字，詳細如下：

關鍵字	描述
closest-side	漸變中心距離容器`最近的邊`作為終止位置。
closest-corner	漸變中心距離容器`最近的角`作為終止位置。
farthest-side	漸變中心距離容器`最遠的邊`作為終止位置。
farthest-corner（預設）	漸變中心距離容器`最遠的角`作為終止位置。

size和position可以用at連線，例如30px 40px at center，表示以元素中心點為圓心，30px為水平半徑，40px為垂直半徑的橢圓型漸變。

color-stop,與線性漸變的用法相同，這裡就不在贅述了。

1.3 徑向漸變之案例

1.3.1 最基礎的用法

<div class="easy"></div>
複製程式碼

.easy{
  width: 200px;
  height: 100px;
  background: radial-gradient(yellow, red);
}
複製程式碼

以中心(50%, 50%)為起點，到最遠角（farthest-corner），從red到green、blue的均勻漸變，效果如下圖：

1.3.2 多顏色節點不均勻分佈

 <div class="easy2"></div>
複製程式碼

.easy2{
  width: 200px;
  height: 100px;
  background: radial-gradient(yellow 5%, red 15%, blue 60%);
}
複製程式碼

1.3.3 指定漸變的形狀

<div class="easy3"></div>
<div class="easy4"></div>
複製程式碼

.easy3{
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid deeppink;
  background: radial-gradient(circle, yellow 5%, red 15%, white 40%);
}
.easy4{
  display: inline-block;
  width: 200px;
  height: 100px;
  border: 1px solid deeppink;
  background: radial-gradient(ellipse, yellow 5%, red 25%, white 40%);
}
複製程式碼

1.3.4 指定徑向漸變的位置和尺寸

使用數值指定漸變的位置和尺寸，在本例中，30px 50px指明瞭水平方向的漸變尺寸為30px，垂直方向上的漸變尺寸為50px，同時漸變的中心點為center或者left。

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
複製程式碼

.box{
  display: inline-block;
  width: 200px;
  height: 100px;
}
.box1{
  background: radial-gradient(30px 50px at center, yellow, red);
}
.box2{
  background: radial-gradient(50px 50px at center, yellow, red);
}
.box3{
  background: radial-gradient(50px 30px at center, yellow, red);
}
.box4{
  background: radial-gradient(20% 50% at left, yellow, red);
}
複製程式碼

使用關鍵字指定漸變的位置和尺寸。在本例中，使用關鍵字指明瞭徑向漸變的尺寸，相關的解釋可以對著上文的具體含義。

<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></div>
複製程式碼

.box{
  display: inline-block;
  width: 200px;
  height: 100px;
}

.box10{
  background: radial-gradient(closest-side circle at 50% 75%, yellow, red);
}
.box11{
  background: radial-gradient(closest-corner circle at 50% 75%, yellow, red);
}
.box12{
  background: radial-gradient(farthest-side circle at 50% 75%, yellow, red);
}
.box13{
  background: radial-gradient(farthest-corner circle at 50% 75%, yellow, red);
}
複製程式碼

1.3.5 可累加的徑向漸變背景圖

徑向漸變的本質也是背景圖，利用背景的可疊加性，可以實現酷炫的效果，比如本例中的類似眼睛的效果圖。

<div class="easy5"></div>
複製程式碼

.easy5{
  display: inline-block;
  width: 200px;
  height: 100px;
  background: radial-gradient(100px 50px ellipse, transparent 40px, red 60px, transparent 61px),
    radial-gradient(10px circle, #000, #000 10px, transparent 11px);
}
複製程式碼

1.3.6 徑向漸變的尺寸控制

利用background-size屬性控制背景圖的大小以及其本身的重複性質，我們還可以實現其的一些效果。

利用徑向漸變實現複雜的紋理效果

<div class="easy6"></div>
複製程式碼

.easy6{
  display: inline-block;
  width: 100px;
  height: 200px;
  background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
    radial-gradient(3px circle, red, red 3px, transparent 4px);
  background-size: 25px;
}
複製程式碼

利用徑向漸變實現水波效果

<div class="easy7"></div>
複製程式碼

.easy7{
 width: 200px;
 height: 100px;
 background: #cd0000;
 position: relative;
}
.easy7:after{
 content: '';
 position: absolute;
 height: 10px;
 left: 0;
 right: 0;
 bottom: -10px;
 background: radial-gradient(20px 15px ellipse at top, #cd0000 10px, transparent 11px);
 background-size: 20px 15px;
}
複製程式碼