Question

.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

Answer 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)
        );

您可以在developer docs

了解有关线性渐变的更多信息

注意：另外，对于border-radius，根据Mozilla's Documentation，“在Gecko 13.0中删除了对前缀版本（-moz-border-radius）的支持（Firefox 13.0 / Thunderbird 13.0 / SeaMonkey） 2.10）。“。如果要支持旧版本的firefox

，可以轻松添加-moz-border-radius

需要帮助转移CSS才能兼容Mozilla

1 个答案: