Question

好的，我无法解释我真正需要的东西，所以我会展示它。

或者......如果我试一试：我需要一个边框，不围绕div， NOT 更改任何内容（ width ， height ， margin ， padding - 没有...），就好像它是在之上strong>前面提到的div ...

示例：

CSS： （使用属性comp-id定位元素 - 使用msp-selected类设置边界状态）

[comp-id] { cursor:pointer; } [comp-id] .msp-selected, [comp-id] .msp-selected:hover { border:2px solid red; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

我已尝试使用border，outline和box-sizing:border-box;，但上述方法均未保留布局。

那么，......任何想法如何实现？

更新（这是box-sizing - 是的，所有这些 - 确实如此）：

假设我们首先突出显示上面的元素（添加边框），然后是底部元素 - 正如您所注意到的，边框会影响布局（就像它添加了填充或某些内容）。 ..

Answer 1

带插图的盒子阴影：

.box:hover {box-shadow: inset 0 0 0 5px red;}

see the jsfiddle for further explaination

Answer 2

http://jsfiddle.net/KGXYR/6/

div {
    background: green;
    width: 100px;
    height: 100px;
    outline: thick solid #00ff00;
    outline-offset: -6px
}

outline

outline-offset

<强>更新

http://jsfiddle.net/XKAVF/

.box{
    width: 200px;
    height: 100px;
    background: #333;
}

.box:hover{
     outline: thick solid #00ff00;
     outline-offset: -5px
}

Answer 3

CSS边框没有影响布局边距，填充，宽度或高度：

div {
    width: 100px;
    height: 100px;
    background: yellow;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 10px solid transparent;
}

div:hover {
    border: 10px solid red;
}

请参阅my fiddle

Answer 4

你可以使用box-shadow。示例（jsFiddle）：

box-shadow: inset 0 0 0 5px red;

在div内部绘制一个5px的红色边框 - 不改变位置，高度等。另外，请不要忘记添加各种浏览器前缀（例如-webkit-，-moz，-o-），我只是为了简单起见而留下它们。

修改与border-box和outline相比的优势在于，您可以非常好地制作动画：

box-shadow：jsFiddle vs border-box：jsFiddle

Answer 5

您找到了解决方案box-sizing:border-box;。只需确保为其他浏览器包含-webkit和-moz-box，如下所示：


div { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

请记住，box-sizing是一个CSS3属性，在IE7和IE6中不起作用。

以下是有关该主题的更多信息：How CSS Box Model Works

干杯，希望对你有帮助。

Answer 6

我不确定box-sizing为什么不能为你工作，但也许用假元素伪装它会起作用：

div {
    background-color: #6af;
    width: 10em;
    height: 5em;
}
div:hover::before {
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    border: thick solid green;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

jsFiddle

这是一篇关于伪元素的有趣文章：A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

在div上绘制边框

6 个答案: