徑向漸變(Radial gradients)由其中心點(diǎn)、邊緣形狀輪廓及位置、色值結(jié)束點(diǎn)（color stops）定義而成。
當(dāng)我們?yōu)橐粋€(gè)漸變?cè)O(shè)置多個(gè)顏色時(shí)，它們會(huì)平分這個(gè)100%的區(qū)域來(lái)漸變。當(dāng)然除了百分比，我們也可以使用具體的像素來(lái)設(shè)置這個(gè)大小。像素設(shè)置的大小指的是從漸變圓心向外延伸的距離。
語(yǔ)法：
background: radial-gradient( [ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )
position：如缺少，默認(rèn)為中心點(diǎn)。
-
shape：漸變的形狀。圓形或橢圓形。默認(rèn)值為橢圓。
-
size：漸變的尺寸大小。
-
color-stop：表示某個(gè)確定位置的固定色值。<color>值加上可選的位置值。百分比值0%，或者長(zhǎng)度值0，表示漸變中心點(diǎn)；百分比值100%表示漸變射線與邊緣形狀相交的點(diǎn)。 其間的百分比值線性對(duì)應(yīng)漸變射線上的點(diǎn)。
-
extent-keyword：關(guān)鍵字用于描述邊緣輪廓的具體位置。以下為關(guān)鍵字常量：
舉栗子??
1.radial-gradient( #0FF 100%, #00F)
2.radial-gradient( #0FF, #00F 0%)
這兩個(gè)效果有什么不同呢？
顏色的分布是從0%（漸變圓心）的位置到100%的位置的（100%的位置也就是漸變的半徑），默認(rèn)情況下，第一個(gè)顏色的位置是0%，最后一個(gè)顏色是100%。超出這個(gè)范圍的用距離最近的顏色來(lái)填充。
1.在第一個(gè)例子中，#0FF設(shè)置了100%，所以它的顏色是從最外面的邊框往外蔓延，所以框里就沒(méi)有顏色了，于是就用靠近的顏色 #0FF來(lái)填充，所以，最后框里的顏色還是它。
2.在第二個(gè)例子中，#00F設(shè)置成了0%，于是#0FF就變成了 0%-0%，無(wú)法填充，所以從 #00F 開(kāi)始填充 0%-100%。所以是深藍(lán)色的。
實(shí)現(xiàn)一個(gè)穿透效果的圓
radial-gradient(500px 500px at 50% 0px, transparent 0%, transparent 50px,#fff 50px, #fff 100%)
白色的背景上這個(gè)半圓是全透明的，所以，背景位置變化這個(gè)半圓的穿透效果依然不會(huì)變。
