仅轮廓边框底部[重复]

Question

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

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

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

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

Answer 1

要解决此问题，您可以使用border-bottom，并设置margin-bottom: -1px（边框大小）。这将阻止它移动下面的内容。

HTML：

<div></div>
test

CSS：

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

DEMO HERE

Answer 2

outline 不像边框属性。你有所有方面，或者没有。 您最好使用与覆盖盒子模型的box-sizing:border-box 混合的border 属性，这样您的布局就不会“移动”。

http://jsfiddle.net/8XjM5/1/

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;

}