3

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

或者......如果我用文字试一试：我需要一个边框，而不是围绕 div，不改变任何东西（宽度，高度，边距，填充- 什么都没有......），就像它被绘制在顶部一样上述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- 是的，所有这些 - 所做的）：

在此处输入图像描述

假设我们首先突出显示上部元素（添加边框），然后是底部元素 - 正如您可能注意到的那样，边框确实会影响布局（例如添加填充或某事）......

4

6 回答 6

5

带插图的盒子阴影：

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

请参阅 jsfiddle 以获得进一步的解释

于 2013-08-22T14:08:13.837 回答
1

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

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

outline

outline-offset

Update:

http://jsfiddle.net/XKAVF/

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

.box:hover{
     outline: thick solid #00ff00;
     outline-offset: -5px
}
于 2013-08-22T14:12:01.600 回答
1

不影响布局边距、内边距、宽度或高度的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;
}

看我的小提琴

于 2013-08-22T14:15:28.820 回答
0

你找到了你的解决方案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 中不起作用。

这里有更多关于这个主题的内容：CSS 盒子模型的工作原理

干杯，希望对你有帮助。

于 2013-08-22T14:10:23.227 回答
0

您可以为此使用 box-shadow 。示例（jsFiddle）：

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

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

编辑：border-box与and 相比的优势outline在于，您可以很好地对其进行动画处理：

box-shadow: jsFiddle与border-box: jsFiddle

于 2013-08-22T14:06:45.013 回答
0

我不确定为什么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

于 2013-08-22T14:26:14.280 回答