原标题:如何用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));
}
你也是网站设计爱好者,可访问我们的官方网站()了解更多资讯。返回搜狐,查看更多
责任编辑: