1

ボーダートップとボーダーボトムを自分で作った特定のボーダーに変更する方法があるかどうか疑問に思っていました。これは画像であり、使用がリンクにカーソルを合わせたときに表示されるようにしたかったのです。

それは可能ですか？または、リンクを画像にしてから、画像をボーダー付きのリンクの別の画像に変更する必要がありますか。（これは長い道のりのようです。もっと簡単な方法があることを望んでいました）

これは私のコードです。すべて正常に動作します。実線の境界線を自分で作成した画像の境界線に置き換えたいだけです。

CSS:

.home   {
font: bold 15px;
    text-align:center;
height:30px;
width: 223px;
    background-color: #d0d1cf;
    color: #000000;
    padding: 2px 2px 2px 2px;
position:absolute;
left:80px;
top:200px;
}

.home:hover {
        background-color:#b2b4b0;
        border-top:solid 1px #ffffff;
        border-bottom:solid 1px #ffffff;
        }

HTML:

    <div class="home">
    <a href="home.html">Home</a>
</div>
4

2 に答える 2

0

ホバー時に背景画像を使用して、表示したい両方の境界線を表示できます。

a {
border-top:5px;
border-bottom:5px;
height:50px;
}
a:hover {
border:none;
background-image:url(image.jpg);
height:60px;/*normal height + missing borders*/
}

あなたがする必要があるのは、上に上の境界線、下に下の境界線が要素の高さ+両方の境界線の高さが追加された画像を作成することです。

また、ホバーで境界線を削除したら、要素の高さを調整する必要があります。これにより、境界線が欠落しているために要素の高さが変更されません。

真の高さ=高さの支柱+境界線+パディング。

まだ広くサポートされていないため、これには境界線画像を使用しません。

于 2013-01-01T18:23:09.063 に答える
0 
div
{
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

http://www.w3schools.com/cssref/css3_pr_border-image.aspで、border-image の詳細をお読みください。

border-image は IE ではサポートされていないことに注意してください

于 2013-01-01T18:12:13.997 に答える