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

Question

我正在使用jQuery和CSS.当我mouseenter为一个图像使用一个事件(在图像周围放置一个边框)时,由于外部边框,布局变得很复杂,这使得它非常难看.我只是想知道是否有办法将边框放在img中,以便img容器保持相同的大小并且不会影响布局.我唯一能想到的就是调整图像的大小mouseevent,这似乎是很多工作(计算尺寸,特别是考虑响应性),我可以看到很多问题都是由于这样做而产生的.

Answer 1

实际上你不能使用border属性在元素内部有一个边框,解决方法是使用box-shadowset toinset

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

演示