html中怎样写渐变色代码,如何用CSS写渐变色

原标题：如何用CSS写渐变色

网页的应用中，有时会用到渐变色，文汇小编在这里跟大家分享一下使用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));

}

你也是网站设计爱好者，可访问我们的官方网站(www.cnwenhui.cn)了解更多资讯。返回搜狐，查看更多

责任编辑：