Html 仅底部轮廓边框

当光标位于图像上时，我想创建一个底部轮廓边框，但我不知道怎么做。我想使用这种内边框，因为我不希望传统边框底部出现布局问题

这是我当前的代码，到处都有大纲边距：

.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}

a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}

---

要解决此问题，您可以使用

边框底部

，并将其设置为

边距底部：-1px

（边框的大小）。这将阻止它移动下面的内容

HTML:

<div></div>
test

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

---

outline

与border属性不同。你有所有的方面，或者没有。 您最好使用border属性与覆盖长方体模型的

长方体大小：border box

混合使用，这样布局就不会“移动”

---

大纲不允许只有一面，你们可以这样做，我愿意接受任何其他的解决方案。你说不漂亮是什么意思？我刚加了我的答案你怎么给边框涂颜色？我的总是显示出来black@JoePhillips

边框颜色：红色只是普通的CSS。啊，我明白了，我没有这样做，因为它使用的是
CSS3
。我也尝试过这样做，但当我应用它时，我的图像正在移动（当a:悬停时大小会减小），这与其他代码不同。。。请参阅（抱歉，我不知道如何使用此网站，我想我删除了您的代码新手）img是一个内联元素，该属性仅适用于块元素。无论如何，即使是css3功能，它也得到了广泛支持：
div {
    width: 100px;
    height: 100px;
    background: #eee;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;

}