html - 在 div 顶部绘制边框

Question

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

或者...如果我尝试使用文字:我需要一个边框，不是在 div 周围，不是改变任何东西(宽度, height, margins, padding - 什么都没有...)，就好像它被绘制在之上 前面提到的 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