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

開発者ドキュメントで線形勾配の詳細を読むことができます

注: また、border-radius については、Mozilla のドキュメントによると、「接頭辞付きのバージョン (-moz-border-radius) のサポートは Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) で削除されました。」. Firefox の古いバージョンをサポートしたい場合は、 -moz-border-radius を簡単に追加できます。

于 2012-09-16T03:12:17.827 に答える