css3漸變效果

學習資料：菜鳥教程；http://www.runoob.com/css3/css3-gradients.html

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

1.線性漸變：（1）從上到下（效果圖）；

代碼：

從下到上，從左到右等都能實現；

        background: linear-gradient(to right,blue,red,gray);
          /*兼容性判斷*/
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

實現對角漸變：

除此之外還能採用角度值，直接將to bottom,to left直接替換成20deg，30deg等等；

設置顏色值時，除了英文單詞，還能rgba等使用透明度；

還可以重複線性漸變：repeating-linear-gradient() 函數用於重複線性漸變需要加百分比才能出現這種效果：

CSS3 徑向漸變

均勻徑向漸變；

非均勻徑向漸變只要顏色後面加百分比：

設置形狀

shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。

圓形通過設置第一個參數爲circle就行

徑向漸變不同尺寸關鍵字的使用：closest-side，farthest-side，closest-corner