CSS3顏色漸變

漸變帶來了色彩巨大的展現。可謂不可不學~是故收集整理，權當乙個小教程吧。

一、線性漸變在mozilla下的應用

語法：

-moz-linear-gradient( [|| ,]? , [, ]* )

引數：

其共有三個引數，第乙個引數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成lefttop，那就是從左上角到右下角。第二個和第三個引數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的引數，表示多種顏色的漸變。如圖所示：

根據上面的介紹，先來看乙個簡單的例子：

html：

css：

.example

.example1

效果如下：

二、線性漸變在webkit下的應用

語法：

-webkit-linear-gradient( [|| ,]? , [, ]* )//最新發布書寫語法
-webkit-gradient(, [, ]?, [, ]? [, ]*) //老式語法書寫規則

引數：-webkit-gradient是webkit引擎對漸變的實現引數，一共有五個。第乙個引數表示漸變型別（type），可以是linear（線性漸變）或者radial（徑向漸變）。第二個引數和第三個引數，都是一對值，分別表示漸變起點和終點。這對值可以用座標形式表示，也可以用關鍵值表示，比如 left top（左上角）和leftbottom（左下角）。第四個和第五個引數，分別是兩個color-stop函式。color-stop函式接受兩個引數，第乙個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色。如圖所示：

我們先來看乙個老式的寫法示例：

background:-webkit-gradient(linear,center top,centerbottom,from(#ccc),to(#000));

效果如下所示

再看一下新式的寫法：

-webkit-linear-gradient(top,#ccc,#000);

仔細對比，在mozilla和webkit下兩者的學法都基本上一致了，只是其字首的區別，當然哪一天他們能統一成一樣，對我們來說當然是更好了，那就不用去處理了。

三、線性漸變在trident(ie)下的應用

語法：

filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#1471da, endcolorstr=#1c85fb);
-ms-filter: "progid:dximagetransform.microsoft.gradient (gradienttype=0, startcolorstr=#1471da, endcolorstr=#1c85fb)";

ie依靠濾鏡實現漸變。startcolorstr表示起點的顏色，endcolorstr表示終點顏色。gradienttype表示漸變型別，0為預設值，表示垂直漸變，1表示水平漸變。如圖所示：

CSS3顏色漸變

css3 顏色背景漸變

CSS3背景顏色漸變效果

CSS3實現背景顏色漸變

CSS3顏色漸變

css3 顏色 背景 漸變

CSS3背景顏色漸變效果

CSS3實現背景顏色漸變

相關推薦

css3 顏色背景漸變