Question

我在<div>中只有small margin/border/padding set的缩略图行。我想在CSS转换过程中添加'focus'类来突出显示页面上的一个缩略图，即'div.thumb.focus'

是否有任何简单的CSS技巧可以在'div.thumb'周围包裹一个框架而无需在页面中重新定位div.thumb？

div.thumbs绝对位于容器中。我希望框架比margin/padding之间的div.thumb更强。只要点击事件读取z-index，它就可以生活在较高的div.thumb.focus上，并部分覆盖相邻的拇指。一个简单的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;
    }
   }

 }

Answer 1

我想到了一些解决方案（不是特定于Bootstrap）：

使用更好的盒子模型，但它可能会影响你的填充：

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

或者使用看起来像边框的硬插图阴影：

box-shadow: inset 0 0 0 10px red

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

outline: 10px solid red

Answer 2

现在，我对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;
}

这与我认为的盒子阴影有类似的问题。

CSS在IMAGE周围添加一个胖“框架”而不改变IMAGE定位

2 个答案: