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

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的更多信息

请注意，IE

不支持border-image

Answer 2

您可以在悬停时使用背景图像，该背景图像将包含您想要显示的边框。

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

您需要做的就是创建一个顶部边框位于顶部的图像，底部的底部边框具有元素的高度+添加的两个边框的高度。

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

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

我不会使用边框图片，因为它尚未被广泛支持。

CSS：当我的鼠标悬停在链接上时，如何将链接的“border-top”变为图像

2 个答案: