CSS：当我的鼠标悬停在链接上时，如何将链接"border-top"成图像

Question

我想知道是否有办法将边框顶部和底部更改为我自己制作的特定边框。这是一张图片，我希望它在链接上悬停时显示出来。

这可能吗？或者我必须将我的链接制作成图像，然后将图像更改为带有边框的链接的另一个图像。(这似乎还有很长的路要走。我希望有一个更简单的方法(

这是我的密码。一切都很好。我只想用我自己制作的图像边框来代替实体边框。

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>

Answer 1

您可以在悬停时使用背景图像，该图像将具有您想要显示的两个边界。

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

你所需要做的就是创建一个图像，顶部边框在顶部，底部边框在底部，添加了元素的高度+两个边框的高度。

此外，一旦你在悬停时删除了边框，你就需要调整元素的高度，这样它就不会因为缺少边框而改变高度。

真实高度=高度道具+边框+填充。

我不会使用边界图像，因为它还没有得到广泛支持。

Answer 2

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 不支持边界图像