css3 漸向徑變之《radial-gradient》

1.語法

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
 -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

<bg-position>：漸變起始位置

            參數：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

                    <length>:用長度值指定徑向漸變圓心的橫坐標值。可以為負值。

                    <percentage>:用百分比指定徑向漸變圓心的橫坐標值。可以為負值。

                    left:設置左邊為徑向漸變的橫坐標值。

                    center:設置中間為徑向漸變圓心的橫坐標值。

                    right:設置右邊為徑向漸變圓心的橫坐標值。

<shape>：漸變形狀

                參數：[circle | ellipse]

                        circle ：圓形漸變；

                        ellipse：橢圓漸變；

<size>: 漸變大小

     參數:[closest-side | closest-corner | farthest-side | farthest-corner]

       closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

       closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

       farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

       farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

<color-stop>:用于指定漸變的起止顏色

                參數：[<color> ? <length | percentage>, <color> ? <length | percentage> , <color> ? <length | percentage>]

                        顏色不能少于兩種

                        color:指定顏色

                        length:用長度值指定起止色位置。不能為負值。

      percentage:用百分比指定起止色位置。不能為負值。

                    注：起止色位置值是累加計算 ，第二個顏色必須大于第一個，第三個顏色位置必須大于第一個與第二個的和；