css3 線性漸變和徑向漸變

線性漸變：ie6以下不相容

徑向漸變：只支援firefox、chrome和safari

注意：background-image 可以寫 background

我自己在網頁中寫的徑向漸變相容** ：firefox、chrome、ie10、ie10+、safari（background-image老式寫法）相容

background: rgb(98, 37, 140);

background:-webkit-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));
background-image: -webkit-gradient(radial,50% 0%,0,50% 55%,90,from(rgb(160, 114, 193)),to(rgb(98, 37, 140)));
/*safari 4-5, chrome 1-9 
*/background:radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));
background:-moz-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));
background:-ms-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

background: rgb(247, 100, 14);

background:-webkit-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));/* safari,chrome*/
background:linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));
background:-moz-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));
background:-ms-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14)); 

Css3漸變 Gradients 徑向漸變

css3徑向漸變 radial gradient repeating radial gradient 徑向漸變由它的中心定義。建立徑向漸變，至少定義兩種顏色節點，呈現平穩過度的顏色。同時，你也可以指定漸變中心 形狀 圓形或橢圓形 大小。預設情況下，漸變的中心是center 表示在中心 漸變的形狀是e...

詳解CSS3漸變（線性和徑向）

css3漸變分為線性漸變和徑向漸變，先來說說比較簡單的線性漸變。css3的線性漸變和設計軟體中的漸變工具沒什麼區別，都是指定乙個漸變的方向，起始顏色，結束顏色，當然，起始顏色和結束顏色中間還可以新增其他顏色，也就是說漸變色可以是多種，而不僅僅是兩種顏色之間的漸變。w3c標準線性漸變語法如下 line...

CSS3重複漸變（線性和徑向漸變）

background image repeating linear gradient to top,f9f9f9,f9f9f9 29px,ccc 30px 重複線性漸變 background image repeating radial gradient red,green 40px,orange ...