-1

box-shadowCSSがグラデーションではないことを発見しました。

ボタンとして表示されているリンク要素の下に、あるRGBカラーから別のRGBカラーに変化するグラデーションを設定したいのですが、これはドロップシャドウのように見えます。一番上のRGBカラーは#333であり、ボタンのRGBカラーで#fffあり、高さは4ピクセルである必要があります。（たとえば、ボタンの画像からこれを測定していません）。

だから私は

<a href="#" class="mybutton">Button</a>.

その真下に影が欲しい。

再現しようとしている下にグラデーションの影があるボタンは次のとおりです。

ここに画像の説明を入力してください

ボックスシャドウを使用してこれを行う同等の方法はありますか、それとも他の方法がありますか？

4

1 に答える 1

1

おそらく次のようなものです（ただし、好みの色などで少し遊ぶ必要があります）。

<a href="#" class="btn">Button</a>​​​​​​​​​​​

.btn {
    border: solid 1px rgb(139,137,125); 
    border-color: rgb(182,179,161) rgb(167,164,146) rgb(139,137,125) rgb(167,164,146); 
    background: #C9C6B4; /* old browsers */ 
    background: -moz-linear-gradient(top, #D8D5C1 3%, #C9C6B4 4%, #A7A492 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #D8D5C1), color-stop(4%, #C9C6B4), color-stop(100%, #A7A492)); /* webkit */ /*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D5C1', endColorstr='#A7A492',GradientType=0 );*/ 
    -moz-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px; 
    -webkit-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px; 
    text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px; 
    -webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px; 
    box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
    cursor: pointer; 
    font: bold 12px/1em Arial, Helvetica, sans-serif; 
    color: rgb(255,255,255)!important; 
    text-align: center; 
    white-space: nowrap; 
    float: right; 
    margin: 0 0 8px 5px; 
    padding: 0.5em 1em; 
}

.btn:hover {
    border-color: rgb(211,106,13) rgb(185,72,0) rgb(166,53,0) rgb(185,72,0); 
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px; 
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px; 
    -moz-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px; 
    -webkit-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px; 
    text-shadow: rgba(255,255,255,0.9) 0px 0px 10px; 
    box-shadow: rgba(0,0,0,0.5) 0px 1px 2px; 
    background: #DD6C00; /* old browsers */ 
    background: -moz-linear-gradient(top, #F69C11 3%, #DD6C00 4%, #BB4A00 100%);  /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #F69C11), color-stop(4%, #DD6C00), color-stop(100%, #BB4A00));
}

ニック

于 2012-12-30T20:27:08.140 に答える