關于css3的漸變，目前各大瀏覽器還未做到很好的支持，所以需要在我們
使用時加上各大瀏覽器前綴。
-moz-：使用Mozilla內核的瀏覽器（Firefox瀏覽器）
-webkit-：使用Webkit內核的瀏覽器（Chrome,Safari瀏覽器）
-o-：使用Opera內核的瀏覽器（Opera瀏覽器）
這里對IE不做過多介紹，對于本文背景顏色的漸變，也沒有考慮IE
一。線性漸變(linear-gradient)
1.語法：-moz-linear-gradient(<point>/<angle>,<color-stop>,<
color-stop>……)
參數：第一個參數便是線性漸變的方向
top：從上到下；
left：從左到右；
right：從右到左；
bottom：從下到上；
也可以兩兩組合，例如從左上：left top,從右上：right top等等，這里就不過多介紹了；
angle代表角度（一直認為涉及到角度一個平面直角坐標系足夠直觀）。
第二個參數和第三個參數分別是起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸變，
顏色支持使用16進制數值表示，也可以使用rgb(a)數值
例：background:-moz-linear-gradient(top,#000,#fff);
注：表示從#000到#fff的漸變
background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);
注：表示0-50%是#000,50%-100%是#555
2.語法：-webkit-linear-gradient(<point>/<angle>,<color-stop>,<
color-stop>……) 【新式語法書寫規則】
-webkit-gradient(<type>,<start point>/<angle>,<
end point>/<angle>,<color-stop>,<color-stop>……)
【老式語法書寫規則】
新式語法書寫規則與其他相同這里不過多介紹，下面介紹一下老式語法規則：
參數：第一個參數表示漸變類型，可以是linear(線性)或者radial(徑向)；
第二個參數和第三個參數表示漸變的起點和終點，可以是坐標或關鍵值；
第四個和第五個參數分別表示起點和終點的顏色，還可以再他們之間插入更多的參數，表示多種顏色的漸變，
顏色支持使用16進制數值表示，也可以使用rgb(a)數值。
例：background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));
注：表示從上到下，從#fff到#000的漸變
background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),
color-stop(.5,rgba(0,0,0,.2)));
注：表示從左上到右下0-50%是白色，50%-100%是透明度為0.2的黑色
3.語法：-o-linear-gradient(<point>/<angle>,<color-stop>,<
color-stop>……)
例：background:-moz-linear-gradient(top,#000,#fff);
注：表示從#000到#fff的漸變
二。徑向漸變（radial-gradient）
語法：-moz-radial-gradient(<point>/<angle>,<shape>/<
size>,<color-stop>,<color-stop>……);
-webkit-radial-gradient(<point>/<angle>,<shape>/<
size>,<color-stop>,<color-stop>……);
oprea瀏覽器對徑向漸變的支持還不太好，所以在這里不介紹。除了在線性漸變中看到的其實位置，
方向和顏色，徑向漸變允許指定漸變的形狀：圓形（circle）和橢圓形（ellipse）和大小:最近端（closest-side），
最近角（closest-corner），最遠端（farthest-side），最遠角（farthest-corner），包含（contain），覆蓋（cover）。
對于這幾個大小的設置有的差距甚微，有些迷惑。
例：background:radial-gradient(#fff, #000);
background: -webkit-radial-gradient(#fff, #000);
注：表示從白到黑的圓形漸變
background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000);
background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000);
注：表示在80% 20%的位置有白色圓到黑色的漸變
2.css的重復漸變
語法：-moz-repeating-linear-gradient(<point>/<angle>,<color-stop>,<
color-stop>……);
-webkit-repeating-linear-gradient(<point>/<angle>,<
color-stop>,<color-stop>……);
-o-repeating-linear-gradient(<point>/<angle>
,<color-stop>,<color-stop>……);
-moz-radial-gradient(<point>/<angle>,<shape>/<size>
,<color-stop>,<color-stop>……);
-webkit-radial-gradient(<point>/<angle>,<shape>/<
size>,<color-stop>,<color-stop>……);
例：background: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);
background: -webkit-repeating-radial-gradient(#fff, #000 5px,
#000 5px, #fff 10px);
注：表示一圈一圈的黑白圓圈（不要太暈哦）
【 微信掃一掃 】
