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;

}

仅限轮廓边框底部

2 个答案: