HTML/CSS - div 内的环绕矩形？

Question

我正在实现的 UI 由几个排列成几行的“框”组成。

盒子的宽度最初是W(例如100px)，但用户可以将其更改为W 的倍数。基本上，如果第一行有三个宽度为 W 的框，第二行有一个宽度为 3W 的框，那么一切都完美对齐(即，第一个框的右侧行就在第二行的右手边上方)。

我现在正在实现点击选择行为:当用户点击某个框时，我想要/需要给出一个视觉指示，表明该框是“当前选中的”框。这个指示应该是一个矩形，它围绕着具有不同颜色和样式的框。

我尝试使用 border: 5px; 来实现它边框颜色:黑色； border-style: solid; 但这会使矩形出现在框外，从而在每个方向将其邻居推 5px，如下所示:http://jsfiddle.net/4z8LN/1/

具体来说，在该示例中，由于黑框，我们有 (a) 两行之间的垂直间隙； (b) C_1_0 的右侧(浅绿色)与 C_0_2 的右侧(浅蓝色)不对齐。

是否有 CSS/HTML 技巧使边框出现在 inside div 的区域？

Answer 1

添加到 codehorse 的示例中，如果您不想在框阴影上产生重叠效果，您也可以使用插图，如下所示:

.class {
   -moz-box-shadow: inset 0 0 0 5px black;
   -webkit-box-shadow: inset 0 0 0 5px black;
   box-shadow: inset 0 0 0 5px black;
}

http://jsfiddle.net/XeroElixir/w6uJp/

然后为了摆脱与插图冲突的文本，添加一些填充:

.class p {
  padding: 5px;
}

Example of no inset:

Example of inset (and with text)