css漸變是由一個函數生成的圖像css

linear-gradient：線性漸變markdown

radial-gradient：徑向漸變ide

linear-gradient

定義：建立一條沿直線前進的顏色帶；這條直線能夠是任意方向，只要指定角度便可函數

語法：linear-gradient([ | to ], )spa

angle:指定漸變方向code

side-or-corner:描述漸變線的起始點位置，默認爲：to bottomorm

color-stop list:由一個color值組成，而且跟隨一個可選的終點位置圖片

掌握線性漸變，主要掌握三個知識點ip

漸變方向/角度
顏色終止點的含義
顏色漸變中點

下面就從這三個方面進行講解ci

漸變方向/角度

漸變的方向默認是從上到下，可是能夠經過關鍵字或者角度來指定

關鍵字

top， right，bottom，left

to top | right|bottom|left：從下到上，從左到右，從上到下，從右到左

其等價於如下角度

0deg，90deg，180deg，270deg
to top right | top left | bottom right | bottom left

其等價於如下角度

45deg，-45deg，135deg，-135deg

角度

以上圖爲例，顏色是以漸變線進行漸變的，角度爲正，漸變線順時針旋轉，角度爲負，漸變線逆時針旋轉；

在肯定好漸變線以後，在根據顏色的終止點進行顏色漸變。

0deg，漸變線處於垂直狀態，開始點在下方，終止點在上方，因此顏色漸變是從下到上

90deg，漸變線順時針旋轉了90度，開始點在左邊，終止點在右邊，因此顏色漸變是從左到右

顏色的終止點（color-stop）

一個顏色從某個位置到這個終止點之間的區域填充該顏色，沒有過渡漸變，可是從這個終止點位置開始，開始漸變過渡到下一個顏色，兩個顏色之間的過渡終點默認是兩個顏色終止點間的終點。若是最後一個顏色的終止點不是100%，那麼默認最後的區域填充最後一個顏色；

好比：

linear-gradient(red 10%, green 50%, blue 90%);
複製代碼

上面css樣式能夠轉化爲如下

linear-gradient(red 0%, red 10%, green 50%, blue 90%, blue 100%);
複製代碼

而後再來分析

開始兩個顏色終止點是red 0% ，red 10%，也就是說從開始的位置到0%位置填充紅色，從0%位置到10%位置爲紅色到紅色的漸變，也就是沒有漸變，用紅色填充；

第二段兩個顏色終止點是red 10% ，green 50%，也就是說從10%位置到50%位置爲紅色到綠色的漸變；

第三段兩個顏色終止點是green 50%， blue90%，也就是說從50% 位置到90%位置爲綠色到藍色的漸變；

最後是90%位置到100%位置，都是藍色，即沒有漸變，用藍色進行填充；

下圖用了輔助線畫出每一個顏色終止點的位置

漸變中點

默認狀況下，從一個顏色的終止點平滑的過渡到另外一個顏色的終止點，顏色之間的中點是兩個顏色顏色轉換的中點。你能夠將中點移動到這兩個顏色之間的任意位置，方法是在兩個顏色之間添加未標記的 %，以指示顏色的中轉位置。下面的示例是從起始點到10%的位置標記紅色，從90%到結束標記藍色。在10%到90%之間，顏色從紅色過渡到藍色，然而過渡的中點是在30%的標記上，而不是在沒有30%中轉點的狀況下會默認爲50%。

linear-gradient(red 10%, 30%, blue 90%);
複製代碼

linear-gradient(red 10%, blue 90%);
複製代碼

radial-gradient

定義：函數建立了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色以前的漸變組成

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

看上去感受很複雜的樣子，咱們來一個一個來看，其實也不是那麼恐怖

center：漸變的開始中心，默認在圖形的中心點

shape：漸變的形狀，也就是定義漸變以什麼形狀向四周擴散，默認是橢圓形(ellipse)，能夠設置爲原形(circle)

size：漸變的大小，也就是漸變到哪裏中止，有如下值：

closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角（默認值）

start-color.....last-color：和線性漸變的color-stop-list同樣

下面來詳細講解各個參數的做用

center

默認是在圖片的中心點，以下

width: 500px;
height: 500px;
background: radial-gradient(#58a, red);
複製代碼

改變中心點，語法：at x y，如 at 20% 20%

background: radial-gradient(at 20% 20%, #58a, red);
複製代碼

中心點能夠使用百分比，也使用絕對值，也能夠混合使用

使用百分比的話，x是以背景的寬度進行計算，y是以背景的高度計算

shape

共有兩個值：ellipse，circle

ellipse

circle

可是有一點須要注意如下，當須要填充的背景正好是一個正方形，那麼兩個值所獲得的效果是同樣的

size

共有四個值： closest-side:半徑爲從圓心到最近邊 closest-corner:半徑爲從圓心到最近角 farthest-side:半徑爲從圓心到最遠邊 farthest-side:半徑爲從圓心到最遠角

爲了更明顯的看出效果，把漸變中心定在（30% 30%）的位置

closest-side

background-image: radial-gradient(circle closest-side at 30% 30%, red, blue)
複製代碼

closest-corner

background-image: radial-gradient(circle closest-corner at 30% 30%, red, blue)
複製代碼

farthest-side

background-image: radial-gradient(circle farthest-side at 30% 30%, red, blue)
複製代碼

farthest-corner

background-image: radial-gradient(circle farthest-corner at 30% 30%, red, blue)
複製代碼

colors

這個就和線性漸變的color-stop-list同樣了