1

CSS3でこのボタンを複製しようとしています:オレンジ色のボタン

これは mu CSS コードです:

#banneroverlaping > a:link, #banneroverlaping > a:visited{
color: white;
padding: 5px 5px 5px 5px;
background: #FA733B;
background: -moz-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%, #FF501C 51%, #FF501C 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FA733B), color-stop(50%,#FA733B), color-stop(51%,#FF501C), color-stop(100%,#FF501C));
background: -webkit-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -o-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: -ms-linear-gradient(-45deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
background: linear-gradient(135deg,  #FA733B 0%, #FA733B 50%,#FF501C 51%,#FF501C 100%);
}

だから私はこれを得る：

オレンジボタン 2

ご覧のとおり、2 つの色の間のカットは角ではなく、中央から始まります。だから私の質問は、元の画像を複製するためにどのようにコーディングできますか???

前もって感謝します

このサイトを使用してコードをベースにしています

4

2 に答える 2

0

このグラデーションは正方形のボックスで機能します。

background-image: -webkit-linear-gradient(4% 0%, rgb(62,203,103) 48%, rgb(93,244,134) 57%);

background-image: -webkit-gradient(
    linear,
    4% 0%,
    left bottom,
    color-stop(0.48, rgb(62,203,103)),
    color-stop(0.57, rgb(93,244,134))
);

xStartxStart is 4% and yStart=0% を変更して、グラデーションを反時計回りに移動できるようになりました。0.48 または 48% は上部の色 (この CSS では濃い緑) で、57% は薄緑です。それに応じて調整できます....カラーストップの比率が 1、つまり 57% と 57% の場合、2 つのグラデーションを区切る線ができます。そうでない場合は、どちらが大きいかに応じて、値が小さい方にブレンドしようとします

于 2013-05-25T00:17:41.340 に答える