IT兄弟連 HTML5教程 CSS3屬性特效 漸變3
- 2019 年 11 月 26 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103232187
4 徑向漸變
CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿著一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變複雜的多。
徑向漸變的格式如下：
radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>，<點>…)
徑向漸變的參數描述如表1：
表1 CSS3徑向漸變參數描述
5 徑向漸變實例
雖然徑向漸變要比線性漸變更為複雜，只要了解了其基本語法以及相關屬性參數的作用，並不需要花太多的時間去適應。接下來，我們通過實戰來加強徑向漸變的使用。本節的所有例子我們都在一個寬度為400像素，高為300像素的容器中實現。
一、從容器內部向外徑向漸變
先來看一個最簡單的徑向漸變，圓心都是容器正中間，從「#ffc107」顏色向「pink」顏色實現徑向漸變，CSS程式碼如下：
在瀏覽器中查看效果如圖1所示：
圖1 簡單徑向漸變
如果你想製作一個圓形漸變，而不是一個橢圓形漸變，只需要添加一個關鍵詞「circle」，我們在上例的基礎上添加一個關鍵詞「circle」，程式碼如下：
此時的漸變變成了圓形，在瀏覽器中查看效果如圖2所示：
圖2 圓形漸變
正如你所看到的，圓形的漸變是一個特殊的橢圓漸變，水平半徑和垂直半徑具有相同的長度值。既然圓形漸變是橢圓漸變的一種特殊情況，如果我們漸變主要半徑（水平半徑）和次要半徑（垂直半徑）不相同時就是一個橢圓形漸變。正如上面所言，主要半徑和次要半徑不相等時，製作的徑向漸變是橢圓形漸變，在製作橢圓形漸變，可以使用關鍵詞「ellipse」。
二、規定徑向漸變的半徑
除了使用關鍵詞製作不同的徑向漸變，還可以用不同的漸變參數製作徑向漸變效果，通過製作同心圓，主要半徑和次要半徑來決定徑向漸變的形狀。徑向漸變的半徑設為「200px,100px」。水平半徑為200px，垂直半徑為100px，從「#ffc107」色到「pink」色徑向漸變：
此時的漸變變成了水平半徑為200px，垂直半徑為100px的橢圓，在瀏覽器中查看效果如圖3所示：
圖3 自定義半徑的徑向漸變
三、規定徑向漸變的半徑及圓心位置
除了上述方法能實現一些簡單的徑向漸變效果之外，還可以使用漸變形狀配合圓心定位。主要使用「at」加上關鍵詞來定義徑向漸變中心位置。徑向漸變中心位置類似於background-position屬性。例如，圓心位置在「100px,150px」處，水平半徑為200px，垂直半徑為100px，從「#ffc107」色到「pink」色徑向漸變：
此時的漸變變成了水平半徑為200px，垂直半徑為100px且圓心位置在「100px 200px」處的橢圓，在瀏覽器中查看效果如圖4所示：
圖4 自定義半徑及圓心位置的徑向漸變
設置圓心位置除了使用特定的值外，可以使用百分比和一些關鍵詞來定義，如「center」、「top」、「right」、「bottom」、「left」及這些關鍵詞的組合，如「top left」、「right bottom」等，組合位置的關鍵詞順序可以調換。
四、重複的徑向漸變
跟線性漸變一樣，我們也可以為徑向漸變設置重複。以同樣的方式，可以使用相關的屬性創建重複的徑向漸變。其語法和linear-gradient類似，只是以一個徑向漸變為基礎進行重複漸變，如下例所示，我們製作一個三色重複的徑向漸變：
在瀏覽器中查看，漸變效果如圖5所示：
圖5 三色重複徑向漸變
理解了上述的幾個實例後，讀者就可以自己DIY漸變效果了。
