如何为不同的浏览器创建css3后台版本?

时间:2013-05-23 14:58:08

标签: css css3 background gradient linear-gradients

我是CSS新手,不知道如何为所有浏览器创建以下css代码段的不同版本:

background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0px, rgba(0, 0, 0, 0.1) 100%) repeat scroll 0 0 #66BAC0;

我是从网络上的某个地方获得的,但它没有其他供应商前缀或浏览器类型。如何使用在线工具或手动完成此操作?

1 个答案:

答案 0 :(得分:2)

这是你的代码:

background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0px, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(255,255,255,0.1)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a000000',GradientType=0 );

我真的推荐这个网站:http://www.colorzilla.com/gradient-editor/ - 它可以让您轻松创建跨浏览器的CSS渐变。