【前端Talkking】CSS系列-css3之徑向漸變初探

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;
}

2 更多關於徑向漸變的東西

除了徑向漸變radial-gradient，css3中還支持重複徑向漸變reapting-radial-gradient。

• 利用重複徑向漸變實現地震波效果

• 利用重複徑向漸變實現唱片CD效果

  點這裏，唱片CD效果

3 寫在最後

若是想對提升本身的csss水平，推薦《CSS揭祕》，很不錯額。

喜歡的話，麻煩點個贊。感謝閱讀。

4 參考連接

W3C linear-gradient

深刻理解CSS3 gradient斜向線性漸變

CSS3 radial-gradient徑向漸變語法及輔助理解案例10則

CSS3 gradient介紹

碰見了，不妨關注下個人微信公衆號「前端Talkking」