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 
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阅读有关边框图像的更多信息

请注意，IE 不支持border-image

于 2013-01-01T18:12:13.997 回答
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 回答