深入理解CSS放射狀漸層radial-gradient，cssradial-gradient

深入理解CSS放射狀漸層radial-gradient，cssradial-gradient
×目錄[1]定義 [2]橢圓圓心 [3]橢圓類型 [4]橢圓大小 [5]色標 [6]重複漸層 [7]其他前面的話

　　上篇介紹了線性漸層，本文接著介紹放射狀漸層的內容

 

定義

　　放射狀漸層，實際上就是橢圓漸層，圓只是一種特殊的橢圓而已。放射狀漸層從圓心點以橢圓形狀向外擴散，漸層的實現由兩部分組成：橢圓和色標。橢圓部分用來控制放射狀漸層的位置、大小和形狀等。而色標部分包含一個顏色值和一個位置，用來控制漸層的顏色變化。

　　[注意]safari4-5、IOS3.2-4.3、android2.1-3隻支援線性漸層，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支援線性和放射狀漸層，且需要添加-webkit-；IE10+及其他高版本瀏覽器支援標準寫法

//標準寫法radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)//-webkit-老版本放射狀漸層的寫法-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)

 

橢圓

　　放射狀漸層方式主要由<position>、<shape>、<size>這三個參數影響，分別控制橢圓的圓心、形狀和大小。

position

　　 定義漸層的圓心，預設是center center

<position>: x軸 y軸

x軸:<length> | <percentage> | left | center | righty軸:<length> | <percentage> | top | center | bottom

　　[注意]和線性漸層類似，舊版本-webkit-核心瀏覽器並不支援at <position>的寫法，只支援<position>的寫法

【1】關鍵字

x軸    left: 0% center: 50% right: 100%y軸    top: 0% center: 50% bottom: 100%

【2】數值

　　x軸數值表示在x軸上離0點(漸層框左上方)的位移量；y軸數值表示在y軸上離0點的位移量

【3】百分比

　　其中x軸的百分比相對於漸層框的寬度，而y軸的百分比相對於漸層框的高度。漸層框的寬高由background-size決定

【4】單個值

　　當只有一個值時，預設第二個值為center

shape

　　定義漸層的形狀是圓circle或橢圓ellipse。預設是橢圓

<shape>: circle | ellipse

size

　　定義漸層的大小。預設是farthest-corner

【1】關鍵字

<size>: closest-side | closest-corner | farthest-side | farthest-corner

closest-side:半徑為從圓心到最近邊closest-corner:半徑為從圓心到最近角farthest-side:半徑為從圓心到最遠邊farthest-side:半徑為從圓心到最遠角

//左上為最近角，右上為最近邊；左下為最遠角，右下為最遠邊

【2】圓

　　如果<shape>是circle，則<size>可以設定為<length>，表示直徑，0%表示圓心，100%表示距離圓心為半徑的點

　　[注意]不能為負值也不可以設定百分比

　　[注意]webkit核心瀏覽器支援使用CSS設定圓的<length>型的<size>，但並不支援javascript改變其值；對於safari瀏覽器來說，只有半徑寫在circle關鍵字前面才識別

//以下DEMO只有IE10+及firefox可以正常運行

【3】橢圓

　　如果<shape>是ellipse或不設定時，則<size>可以設定為<length>或<percentage>，第一個值表示水平直徑，第二個值表示垂直直徑。百分比相對於放射狀漸層容器的尺寸

　　[注意]若只有一個值，則表示水平和垂直直徑相同，因為圓是特殊的橢圓，所以一個值時不可以為百分比

　　[注意]和圓類似，<size>值不能為負值，因為其表示的是直徑

　　[重要]由於webkit瀏覽器在使用circle或ellipse關鍵字時渲染不正常，所以若使用circle時，可以不寫shape(預設為ellipse)，用水平和垂直直徑相同的橢圓替代

 

色標

　　與線性漸層的色標相同的部分不再重複，這裡只說明不同的部分。由於位置處於100%的色標有時並不會佔滿漸層地區，則瀏覽器會預設使用最後一個色標的顏色鋪滿漸層地區

<color-stop> = <color> [ <percentage> | <length> ]?

 

重複漸層

　　重複漸層可以實現放射狀漸層的重複效果，使色標在橢圓方向上無限重複，實現一些特殊的效果

　　[注意]只有當首尾兩顏色位置不在0%或100%時，重複漸層才生效

background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%);background-image: repeating-radial-gradient(blue 20%,green 50%);

 

其他

　　關於線性漸層的多背景和應用情境，放射狀漸層與之類似。但放射狀漸層無法實現IE相容。