Javascript CSS添加一个fat“；“框架”；在不改变IMG定位的情况下绕IMG旋转

我在

中有一行缩略图，只有

小边距/边框/填充集

。我想添加一个

'focus'

类，以便在CSS转换期间突出显示页面上的一个缩略图，即

'div.thumb.focus'

是否有任何简单的CSS技巧可以在页面中不重新定位

div.thumb

的情况下将框架环绕在

'div.thumb'

上

div.thumbs完全位于一个容器内。我希望框架比

div.thumb

之间的

margin/padding

更厚。只要单击事件读取

div.thumb.focus

，它可以位于更高的

z索引上，并部分覆盖相邻的拇指。一个简单的JQuery解决方案是可以接受的

 // using LESS syntax
.container {
   position: relative;

  .thumb {
    &.focus {
       <need help here>
    }
    top: @top;
    left: @left;
    position: absolute;
    margin: @margin;
    padding: @padding;

    img {
      width: @width;
      height: @height;
    }
   }

 }

//使用更少的语法
.集装箱{
位置：相对位置；
.拇指{
&.焦点{
}
top:@top；
左：@左；
位置：绝对位置；
保证金：@保证金；
填充：@填充；
img{
宽度：@宽度；
高度：@高度；
}
}
}
想到了一些解决方案（不是特定于引导）：

使用更好的长方体模型，但可能会影响填充：

box-sizing: border-box
border: 10px solid red

或者使用看起来像边框的硬嵌入阴影：

box-shadow: inset 0 0 0 10px red

您可以使用轮廓，但它会溢出框外而不影响其尺寸：

outline: 10px solid red

现在，我不太熟悉LESS，所以我只是在常规CSS中这样做

您可以选择几个选项

添加负边距

.thumb.focus{
    margin-top: -4px;
    margin-left: -4px;
    border: 4px solid blue;
}

但是，这可能不适合您的情况，因为您已经有了一个保证金集。不过，它可能对其他人有用

添加阴影

.thumb.focus{
    box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}

这可以很好地工作，但如果您想在某些面上使用多种颜色/厚度，则不行

使用方框大小调整

.thumb.focus{    
    box-sizing: border-box;
    border: 4px solid blue;
}

这方面的主要问题是浏览器支持

使用大纲

.thumb.focus{
    outline: 4px solid blue;
}

这与我认为的框阴影问题类似。
Try
box shadow:inset 0 0 5px red
Try outline可能重复，不改变元素尺寸soutline是我要找的。我可以最小化缩略图之间的间距，并且仍然有一个容易看到的“框架”。额外提示：对于边缘上的缩略图，有没有一种简单的方法可以让轮廓延伸到封闭容器之外？我想是这个方法。已用溢出：在容器上可见