.greenbutton {
font-family:"Helvetica";
font-size:28px;
font-weight:normal;
line-height:130%;
color:rgb(255,255,255);
font-weight:300;
height:100%;
text-decoration:none;
padding-left:40px;
padding-right:40px;
padding-top:3px;
padding-bottom:3px;
text-align: center;
margin-top:25px;
border-top-width:1px;
border-top-color:#999999;
border-top-style:solid;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0%, rgba(6,171,151,1)),
color-stop(60%, rgba(6,171,151,1)),
color-stop(61%, rgba(120,212,205,1)),
color-stop(100%, rgba(120,212,205,1))
);
-webkit-border-radius:15px ;
}
.greenbuttonholder{
width:140px;
height:50px;
padding-top:25px;
position:relative;
margin:auto;
}
此按钮仅适用于谷歌浏览器,但不适用于火狐浏览器。
顺便说一下,对于那些想在这里做一些实验的人来说,jsfiddle 链接是:http://jsfiddle.net/M5Bzn/
我唯一尝试的是在所有行中添加 -moz- 但这显然不起作用:P
如果你想专门针对 Mozilla,你可以把它添加到你的 css 中:
border-radius: 15px;
background: -moz-linear-gradient(
top,
rgba(120,212,205,1),
rgba(120,212,205,1) 40%,
rgba(6,171,151,1) 41%,
rgba(6,171,151,1)
);
您可以在开发人员文档中阅读有关线性渐变的更多信息
注意:另外,对于边框半径,根据Mozilla的文档,"对前缀版本(-moz-border-radius)的支持在Gecko 13.0(Firefox 13.0/Thunderbird 13.0/SeaMonkey 2.10)中删除。 如果你想支持旧版本的 Firefox,你可以很容易地添加 -moz-border-radius