Question

我正在实施的用户界面由几个组成的几个“盒子”组成。

框的宽度最初为W（例如100px），但用户可以将其更改为W的倍数。基本上，如果第一行有三个宽度为W的框，第二行有一个宽度为3W的框，则所有内容都完美对齐（即，第一行的右侧正好在右上方）第二排的手边。）

我现在正在实施点击选择行为：当用户点击某个框时，我希望/需要给出一个可视指示，表明此框是“当前选中的”。这个指示应该是一个矩形，周围的盒子有一些不同的颜色，风格。

我尝试使用border: 5px; border-color: black; border-style: solid;实现此功能，但这会使矩形显示在框外，从而在每个方向上推动其邻居5px，如下所示：http://jsfiddle.net/4z8LN/1/

具体地，在该示例中，由于黑色框架，我们具有（a）两行之间的垂直间隙; （b）C_1_0（浅绿色）的右侧未与C_0_2（浅蓝色）的右侧对齐。

是否有CSS / HTML技巧使边框显示在 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)

Answer 2

使用box-shadow代替border。 Box-shadow不会像边框一样增加div的宽度和/或高度。

像

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

Answer 3

为div .selected使用插入框阴影： box-shadow: 0 0 0 2px black inset;

http://jsfiddle.net/BRwG3/

Answer 4

使用box-shadow http://jsfiddle.net/4z8LN/3/show/

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#000)";/*IE 8*/
-moz-box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/*FF 3.5+*/
-webkit-box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
box-shadow: inset 5px 5px 0px #000, inset -5px -5px 0px #000;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=#000); /*IE 5.5-7*/

HTML / CSS - div内部的周围矩形？

4 个答案: