0

この問題を何度もグーグルで調べてみましたが、驚くべきことに結果が見つかりません。

全体に 1 ピクセルの暗い境界線があるボタンを作成しようとしていますが、内側に 1 ピクセルのハイライト ボーダートップもあります。

例のボタン この画像は、私が達成しようとしているもののサンプルです。CSS3/HTMLだけでこれを行う方法はありますか?

現在の HTML:

<a href="register" title="Register Now" class="blue_button">Register Now</a>

現在の CSS:

.blue_button {
    background-color: #019df6;
    background: -moz-linear-gradient(top,  #019df6 0%, #027bc1 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019df6), color-stop(99%,#027bc1));
    background: -webkit-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: -o-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: -ms-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: linear-gradient(to bottom,  #019df6 0%,#027bc1 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#019df6', endColorstr='#027bc1',GradientType=0 );
    border:1px solid #0171b1;
    padding:10px 30px;
    font-weight:600;
    font-size:150%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#fff;
    text-decoration:none;
}
4

1 に答える 1

2

このjsFiddleをチェックしてください。ボックスシャドウを使用して、余分なハイライトの上部「境界線」を追加し、外側の境界線と同じように境界線を使用し続けることができます。「はめ込み」がないと、ハイライトは既存の境界線の外側になります。

box-shadow: inset 0px 1px 0px 1px white;

位置とトップのルールを追加することに加えて、jsFiddle で次のコードを使用しました。

box-shadow: inset 0px 3px 2px -2px white;
于 2013-03-19T00:44:18.613 に答える