Html 仅轮廓边框底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23625843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Outline border bottom only
提问by Jean-FIC
I'd like to create a bottom outline border when the cursor is over an image and I don't know how to do this. I'd like to use this kind of inner border because I don't want to have layout problems with a traditional border-bottom.
当光标位于图像上时，我想创建一个底部轮廓边框，但我不知道该怎么做。我想使用这种内部边框，因为我不想在传统的边框底部出现布局问题。
Here's my current code,with outline margins everywhere:
这是我当前的代码，到处都有大纲边距：
.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}
a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}
回答by Ruddy
To get around the problem you can use border-bottom, with it set margin-bottom: -1px(the size of the border). This will stop it from moving the content below.
为了解决这个问题，你可以使用border-bottom, 设置它margin-bottom: -1px（边框的大小）。这将阻止它移动下面的内容。
HTML:
HTML：
<div></div>
test
CSS:
CSS：
div {
width: 100px;
height: 100px;
background: #eee;
}
div:hover {
width: 100px;
height: 100px;
background: #eee;
border-bottom: 1px solid;
margin-bottom: -1px;
}
回答by valerio0999
outlineis not like the border property. you have all sides, or none.
you'd better use the border property mixed with box-sizing:border-boxwhich overwrites the box-model, so that your layout doesnt "move".
outline不像边界属性。你有所有方面，或者没有。您最好使用与box-sizing:border-box覆盖盒模型混合的边框属性，这样您的布局就不会“移动”。
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;
}
