html5 css 渐变背景,css渐变，css渐变色背景

#grad{/*Safari5.1-6.0*/

background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/

background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/

background:linear-gradient(red,blue);/*标准的语法*/

}

#grad{

background:/*Safari5.1-6.0*/

background:-o-linear-gradient(right,red,blue);/*Opera11.1-12.0*/

background:-moz-linear-gradient(right,red,blue);/*Firefox3.6-15*/

background:linear-gradient(toright,red,blue);/*标准的语法*/

css渐变色背景

在Mozilla下

background:-moz-linear-gradient(top,#ccc,#000);

参数说明

1,起点位置top是从上到下,left是从左到右,lefttop是左上到右下

2,开始颜色,

3,结束颜色

在Webkit下

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

参数与mozilla一致

在Opera下

background:-o-linear-gradient(top,#ccc,#000);

数与mozilla一致

更多的参数应用可以去度娘查询,有很详细参数使用示例

css渐变色

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index。

2、在index中的标签中，输入css代码：

div{width:200px;height:150px;background:linear-gradient(red,white);}

3、浏览器运行index页面，此时td中的div的背景颜色从红色到白色渐变。

css渐变色代码

#grad{/*Safari5.1-6.0*/

background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/

background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/

background:linear-gradient(red,blue);/*标准的语法*/

}

#grad{

background:/*Safari5.1-6.0*/

background:-o-linear-gradient(right,red,blue);/*Opera11.1-12.0*/

background:-moz-linear-gradient(right,red,blue);/*Firefox3.6-15*/

background:linear-gradient(toright,red,blue);/*标准的语法*/

css渐变属性

针对不同浏览器有不同的前缀，基本还是相似的，下面的意思是线性渐变，从上方开始，从黑色渐变到白色

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

-moz-linear-gradient(top,#000,#fff);

-o-linear-gradient(top,,#000,#fff);

也可以加一些渐变中间的颜色

-webkit-linear-gradient(top,#000,#eee20%,#fff);

也可以使用colorstop,跟上面的意思相同

-webkit-linear-gradient(top,#000,color-stop(0.2,#eee),#fff)

本文来自: 老铁博客，转载请保留出处！欢迎发表您的评论

相关标签：