-2 
.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;

}

此按钮仅适用于 Google Chrome，但不适用于 Firefox。

顺便说一下，对于那些想要在这里做一些实验的人来说，jsfiddle 链接是：http: //jsfiddle.net/M5Bzn/

我唯一尝试过的是将 -moz- 添加到所有行中，但这显然不起作用：P

4

1 回答 1

1

如果您想专门针对 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 的文档，“在 Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 中删除了对前缀版本 (-moz-border-radius) 的支持。” . 如果您想支持旧版本的 firefox，您可以轻松添加 -moz-border-radius

于 2012-09-16T03:12:17.827 回答