網頁的應用中，有時會用到漸變色，文匯小編在這里跟大家分享一下使用CSS寫漸變色的方法。

如下圖，是由紅色到青色的漸變：

附樣式代碼：

.color1{background:-moz-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));

                   background:-ms-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));

                   background:-o-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));

                   background:-webkit-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));

}

[注1]-moz-linear-gradient用于火狐瀏覽器，-ms-linear-gradient用于IE10，-o-linear-gradient用于歐朋瀏覽器11.10及以上版本，-webkit-linear-gradient用于谷歌瀏覽器。

[注2]方向值取top、bottom、left、right，其中top表示從上往下，bottom表示從下往上，left表示從左往右，right表示從右往左。

[注3] rgb(255,50,98)為紅色的rgb編碼。

我們可以將上述代碼的top改成left，顏色漸變的方向就變成了從左往右。即：

.color2{background:-moz-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));

                   background:-ms-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));

                   background:-o-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));

                   background:-webkit-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));

}

效果如下圖：

以上兩個例子都是從一種顏色到另一種顏色的漸變，下面說一下同一個顏色的不同透明度的變化。如圖：

我們只需將rgb改為rgba，并在參數里面追加一個表示透明度的參數即可，參數值的范圍為0~1,0表示完全透明，1表示不透明。附代碼如下：

.color3{background:-moz-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));

                   background:-ms-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));

                   background:-o-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));

                   background:-webkit-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));

}