仅绘制底部轮廓边框

Question

当鼠标悬停在一张图片上时，我希望创建一个底部轮廓边框，但我不知道如何做到这一点。我想使用这种内部边框，因为我不想使用传统的border-bottom会导致布局问题。

这是我的当前代码，所有地方都有outline边距：

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

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

- Jeanjean

---

大纲不允许只有一侧拥有它。 - Ruddy

你可以像这样做演示。 - Ruddy

Answer 1

为了解决这个问题，您可以使用 border-bottom，并将其设置为 margin-bottom: -1px（边框的大小）。这样就可以防止其移动下面的内容。

<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;
}

这里查看演示

- Ruddy

---

我对任何其他解决方案都持开放态度。你所说的“不漂亮”是什么意思？ - Jeanjean

我刚刚添加了我的答案。 - valerio0999

你如何给边框上色？我的总是显示为黑色。 - Joe Phillips

@JoePhillips border-color: red; 只是普通的 CSS。 - Ruddy

Answer 2

outline 不像 border 属性，你只能选择全部四个边框或者不显示。最好使用 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;

}

- valerio0999

---

啊，我明白了，我没有选择这个，因为它使用了 CSS3。 - Ruddy

我也尝试过这个方法，但是当我应用它时，我的图像会移动（在a:hover时大小会减小），而其他代码则不会出现这种情况...请参见http://jsfiddle.net/8XjM5/4/（抱歉，我不知道如何使用这个网站，我想我删除了你的代码*新手*） - Jeanjean

img是一个内联元素，该属性仅适用于块级元素。无论如何，即使它是CSS3的特性，它也得到了广泛的支持：http://caniuse.com/#search=box-sizing - valerio0999