jquery - 有没有办法将边框放在元素内部而不是外部？

Question

我正在使用 jQuery 和 CSS。当我对图像使用mouseenter事件（在图像周围放置边框）时，布局会因为外部边框而变得不规则，这使得它非常难看。我只是想知道是否有办法将边框放在 img 内部，以便 img 容器保持相同大小并且不影响布局。我唯一能想到的就是在 中调整图像的大小mouseevent，这似乎需要做很多工作（确定大小，尤其是考虑响应性），而且我可以看到这样做会产生很多问题。

Answer 1

实际上，您不能使用border属性在元素内设置边框，解决方法是使用box-shadow设置为inset

div {
    height: 200px;
    width: 200px;
    box-shadow: inset 0 0 1px #000;
}

演示（这将生成一个模糊的边框，要获得一个很好的实心边框，请参阅下面的演示）

---

获得更多的坚固性

div {
    height: 200px;
    width: 200px;
    box-shadow: inset -1px 0 0 red, inset 0 -1px 0 red, inset 1px 0 0 red, inset 0 1px 0 red;
}

演示

Answer 2

调整填充工作。

#something {
    padding: 12px;
}
#something:hover {
    padding: 8px;
    border: 4px solid #FF0000;
}

box-shadow旧浏览器不支持。

请参阅此JSFiddle。

Answer 3

您可以使用:after伪元素选择器。

div {
    height: 200px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
}

div:hover:after{
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    border: 1px solid green;
}

工作小提琴

Answer 4

尝试这个 -

<div>
    <div id="div2"></div>
</div>

<style>
div {
    height: 200px;
    width: 200px;
}
div#div2:hover {
    height: 196px;
    width: 196px;
    border: 2px solid black;
}
</style>

http://jsfiddle.net/ET2De/