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

Demo（这会生成一个模糊的边框，以获得一个漂亮的固定边框，请参阅下面的演示）

获得更多可靠性

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

Demo

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

Working fiddle

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/

有没有办法在Element中放置边框而不是Outside？

4 个答案: