jquery - 外側ではなく要素の内側にボーダーを配置する方法はありますか?

Question

jQuery と CSS を使用しています。画像にイベントを使用するとmouseenter(画像の周りに境界線を配置するため)、外側の境界線のためにレイアウトが微調整され、かなり見苦しくなります。imgコンテナが同じサイズのままでレイアウトに影響を与えないように、境界線をimgの内側に配置する方法があるかどうか疑問に思っていました。私が考えることができる唯一のことは、mouseevent.

Answer 1

border実際には、要素内に境界線を設定するためにプロパティを使用することはできません。これを回避するには、 box-shadowset を使用します。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

これを試して -

<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/