有没有一种方法可以在元素内部而不是外部放置边框？

Question

我正在使用jQuery和CSS。当我使用mouseenter事件为图像（在图像周围放置边框）时，由于外部边框，布局会被调整，这使它非常丑陋。我想知道是否有一种方法可以将边框放置在图像内部，以便图像容器保持相同大小并且不影响布局。我能想到的唯一解决方案是在mouseevent中重新调整图像大小，但这似乎很麻烦（考虑响应性的尺寸问题），而且我可以看到从这样做中出现很多问题。

- Paul Samsotha

Answer 1

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

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

演示

- Mr. Alien

---

我需要将img包裹在div中吗？还是我也可以为img使用box-shadow？ - Paul Samsotha

@peeskillet 在使用伪元素之前，你需要在其前面添加“:”，最好用span包装图像，使用padding，将span设置为inline-block。 - Mr. Alien

Answer 2

调整填充效果很好。

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

box-shadow在旧版浏览器中不被支持。

请查看这个JSFiddle。

- Robbie Wxyz

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

Working fiddle

- Mr_Green

---

合法的解决方案！ - Muhammad Osama

如果:before中有可点击的事件，例如按钮，则比:hover更好。 - Maarten Coppens

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/

- Gupta.Swap