css3 放射狀漸層

標籤：style   blog   http   color   os   使用   io   strong   ar   

/* 放射狀漸層 */
div.radial {
width: 600px;
height: 400px;
margin: 30px auto;
border: 1px #f00 solid;
background-image: -webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow));
}

<!-- 放射狀漸層 -->
<div class="radial">

</div>

****

放射狀漸層(Radial Gradients)

為放射狀漸層的文法非常類似於線性漸層。

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

除了您已經線上性漸層中看到的起始位置，方向，和顏色，徑向梯度允許你指定漸層的形狀（圓形或橢圓形）和大小（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。

顏色起止(Color stops)：就像用線性漸層，你應該沿著漸層線定義漸層的起止顏色。下面的圓具有相同的起止顏色，但在左邊的為預設的顏色間隔均勻的漸層，而右邊的每種顏色都有特定的位置。

起止顏色是沿著漸層線，將會在指定位置（以百分比或長度設定）含有指定顏色的點。色彩的起止數是無限的。如果您使用一個百分比位置，0％代表起點和100％是終點，但地區外的值可以被用來達到預期的效果。

 background: -moz-radial-gradient(red, yellow, #1E90FF); background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

形狀(Shape)：在這裡你可以看到兩個可能的形狀間的差異，一個圓（左側）和橢圓（右側），兩者都起始於bottom left：

 .radial_gradient_circle {    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);} .radial_gradient_ellipse {    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);}

大小(Size)：size的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。

樣本：橢圓的近邊VS遠角
下面的兩個橢圓有不同的大小。左邊的一個是由從起始點(center)到近邊的距離設定的，而右邊的一個是由從起始點到遠角的的距離決定的。

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

樣本：圓的近邊VS遠邊
左邊的圓的漸層大小由起始點(center)到近邊的距離決定，而右邊的圓則有起始點到遠邊的距離決定。

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

樣本：包含圓
在這裡你可以看到左側的預設圈，同一漸層版本，但是被包含的右邊的圓。

 background: -moz-radial-gradient(red, yellow, #1E90FF); background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

五、重複漸層(Repeating Gradients)

如果您想重複一個漸層，您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

在下面的例子，每個執行個體都指定了四個起止顏色，並無限重複。

 .repeating_radial_gradient_example {    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);} .repeating_linear_gradient_example {     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);}

***

漸層位置理解代碼

<style>
div {
  width:100px;height:100px;border-radius:50px;
  background:radial-gradient(at 35px 35px,#FFF,#CCC,#FFF);
  background:-webkit-radial-gradient(35px 35px,#FFF,#CCC,#FFF);
}
</style>
<div></div>
　這個圓上面的顏色就是使用放射狀漸層調出來的。第一行樣式是設定容器的寬高，並且把圓角設定成寬高的一半（當作半徑使用），這樣就可以得到一個圓了。後面兩行樣式是給這個圓上色，！FireFox和Opera不需要首碼可以直接使用radial-gradient（它們曾經也需要首碼，現在不需要了）。Chrome需要-webkit-首碼才可以使用。而且有首碼的放射狀漸層和沒有首碼的放射狀漸層文法有一點不同。
　　先來說說無首碼的放射狀漸層。它使用“at文法”radial-gradient(
  [
    [漸層大小]?
    [ at 漸層圓心座標]?
  ,]?
  顏色[ 開始位置]
  [,顏色[ 開始位置]]+
);　　其實真正的文法比這個複雜很多，這個是根據我自己的理解簡化了的。說白了就是第一個參數用來指定位置和大小，後面是顏色列表。第一個參數的格式是“漸層大小 at 漸層圓心座標”。漸層大小如果只有一個值，那麼它就代表這個漸層是個正圓，這個數值是它的半徑。如果是兩個值，把這個漸層變成橢圓形的；漸層圓心座標是從容器的原點開始算起。 　　
　　這些參數是可以不指定而使用預設值的。圓心座標的預設值是容器的中心，這個比較簡單。而漸層大小的預設值就比較複雜了。如果容器是正方形的，那麼漸層大小的預設值就是一個正圓。這個正圓的半徑是圓心到容器最遠角的距離。

 

<style>
div {width:100px;height:100px;margin:10px;float:left;}
#a {background:radial-gradient(red,green);}
#b {background:radial-gradient(at 35px 35px,red,green);}
#c {background:radial-gradient(at 0px 0px,red,green);}
</style>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
　　如果容器不是正方形，那麼這個漸層大小就會變成橢圓。這個橢圓的兩個半徑就是漸層圓心到容器最遠的角形成的矩形的寬高乘以sqrt(2)，這個可以根據橢圓的方程來推導（其實就是矩形的外接橢圓半徑）。不過一般不需要做這樣的計算。
　　搞明白第一個參數之後就是後面的顏色列表。每個參數除了顏色值以外還可以附帶一個開始位置。<style>
div {width:100px;height:100px;margin:10px;float:left;}
#a {background:radial-gradient(red 100%,green);}
#b {background:radial-gradient(red,green 0%);}
</style>
<div id="a"></div>
<div id="b"></div>
　　顏色的分布是從0%（漸層圓心）的位置到100%的位置的（100%的位置也就是漸層的半徑）。或者說預設情況下，第一個顏色的位置是0%，最後一個顏色是100%。超出這個範圍的用距離最近的顏色來填充。比如上面的第一個例子，red本身是在0%的位置，但是把它設定成了100%的位置。這樣red就從100%的位置開始往外延伸，那麼0%到100%的位置就變成沒有設定顏色了，這時候它會被自動填滿最近的顏色，也就是red。第二個例子也是一樣的道理，由於把green設定到了0%的位置，那麼red的範圍就是0%到0%，這樣就看不見了。而green的開始位置被設定到0%後就變成了0%到100%，所以第二個例子從0%到100%的地區都是綠色。預設情況下，設定多個顏色他們會平分這個100%的地區來漸層。當然除了百分比，我們也可以使用具體的像素來設定這個大小。這個用像素設定的大小指的是從漸層圓心向外延伸的距離。<style>
div {
  width:100px;height:100px;margin:10px;float:left;
  background:radial-gradient(at 0px 0px,red,green 80%,blue);
}
</style>
<div></div>
　　瞭解這麼多，鏡像漸層使用就沒問題了。剩下的就是瀏覽器問題，我們之前說的這一大堆都是拿沒有首碼的CSS說的，而webkit目前暫時不相容沒有首碼的放射狀漸層，所以我們需要單獨為它寫樣式。不過計算方法和這個是一樣的就不需要重複說了。只是寫法上有點不同。帶首碼的樣式不能使用“漸層大小 at 漸層圓心座標”這樣的寫法。它把這東西分成了兩個參數。第一個參數表示漸層圓心座標，第二個參數表示漸層大小。和上面一樣，這兩個參數也是可以省略的。預設值的計算也一樣，僅僅是格式不同而已，所以我就不重複說什麼了。另外要提的就是Firefox同時支援首碼的寫法和無首碼的寫法，而Opera不支援帶首碼的寫法。IE從10開始相容放射狀漸層，用的是-ms-首碼，具體由於我懶的安IE10就沒研究了。不過計算方法也和上面一樣，真想試自己裝個IE10去= =。。

 

css3 放射狀漸層