-4

次のボタンがあります。

ここに画像の説明を入力

HTML/CSS3 を使用して行う必要があります。放射状グラデーションなど、多くのことを試しました。

-webkit-gradient(linear.. と -webkit-gradient(radial...

ヘルプやアイデアはありますか??

4

3 に答える 3

2

これがその試みです：

div {
    background-image:-moz-radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    background-image:-webkit-radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    background-image: radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    height:47px;
    width:202px;
    border-radius:5px;
    text-align:center;
    line-height:47px;
    font-weight:bold;
    font-family: sans-serif;
    color:#AA8100;
}
于 2012-07-21T19:28:37.423 に答える
0

放射状グラデーションは円または楕円でのみ機能するため、画像または css キャンバスがないとそのスタイルを取得できません...

于 2012-07-22T00:00:58.460 に答える
-1

CSSを使用すると、上から下への線形グラデーションが最も近くなります。下部にある少しの光は、CSSで行うのはかなり難しいです。画像が大きくなくても、パフォーマンスにあまり影響しないことを考慮する必要があるかもしれません。

ほとんどの場合、サーバー側のコーディングが問題になるため、パフォーマンスを監視することをお勧めします。大量の画像を読み込む必要がある場合は、サイト上のすべての画像を取得して1つのファイルに入れ、常にそのファイルを取得できますが、背景の位置は異なります。StackOverflowもこれを使用します。この手法は、sprites

それが何をし、どのように機能するかについてのガイドはここで見つけることができます：CSSトリック：スプライト。

これは私が得た最も近いものです：http：//jsfiddle.net/DU3QJ/

于 2012-07-21T19:28:27.313 に答える