CSS3-漸層這個屬性

標籤：

漸層

      有了漸層再也不用去切1px的圖再重複了..

      -webkit- 是瀏覽器首碼, 表示特定瀏覽器對一個屬性還在實驗階段, 在這裡順便寫下各個瀏覽器的首碼:

      chrome/ safari     -webkit-

      firefox                 -moz-

      IE                        -ms-

      opera                  -o-

      為了各個瀏覽器能夠識別, 我們要把每種首碼都要寫一遍... 對了, 只有自己瀏覽器能識別帶自己首碼的屬性.

      background-image: -webkit-linear-gradient(top, red, blue); 

  要注意漸層是 background-image 而不是 background-color!

 --------------------------------------------------------------------------------------------------

      首碼有了, linear 表示線性, gradient 表示漸層.

      第一個參數表示 從哪裡開始(預設是 top), 有:top/ right/ bottom/ left 四個值(linear 時不能寫 center, 我還好死不死的試試, 然並卵0..0), 但可以組合使用: background-image: -webkit-linear-gradient(top left, red, blue); 表示從左上方開始. 

      還可以用度數表示,以下是 0 deg:  

  background-image: -webkit-linear-gradient(0deg, red, blue); 

      以下是90deg:

  background-image: -webkit-linear-gradient(90deg, red, blue); 可以理解為逆時針旋轉90deg(誰會關心這個..).

  --------------------------------------------------------------------------------------------------

     第二個和第三個參數並非只可以有這倆, 看你想讓他漸層多少種顏色, 比如你可以這樣玩:

  咳咳, 能看出重複多少遍的加我Q: 758325009, 給認真的人一個大紅包..

 

 

顏色參數不僅僅唯寫顏色, 還可以設定從哪裡個位置開始漸層這個顏色:

background-image: -webkit-linear-gradient(top left, red, blue 25%, yellow 90%); 這個百分數是相對於漸層的方向那個邊, 表示到這個位置時就已經完全變為該顏色, 說的麻煩, 看:

 -------------------------------------------------------------------------------------------------- 

 

除了可以一個方向上變化, 還可以 radial 輻射狀漸層.

  background-image: -webkit-radial-gradient(center center , red, blue); 此時第一個參數就可寫 center center.

 

 --------------------------------------------------------------------------------------------------

 

      特別的, 當是 radial 漸層時, 可以用 0px 0px 和 30% 30%, 這兩個數值分別是輻射中心相對於 X 軸和 Y 軸的位移量, 如下:

  background-image: -webkit-radial-gradient(0px 0px, red, blue); 

 

 --------------------------------------------------------------------------------------------------

 

  background-image: -webkit-radial-gradient(25% 25%, red, blue);

 

 --------------------------------------------------------------------------------------------------

 

　　以上寫出的並不全, 在此拋磚引玉, 有誤導之處還請不吝指點 ^^.

CSS3-漸層這個屬性