在div上方繪制邊框

Question

好的，我無法解釋我的真正需求，因此我將向您展示。

或者...如果嘗試一下：我需要一個邊框，而不是圍繞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 -是的，所有這些-都做）：

假設我們先突出顯示上方的元素（添加邊框），然后再突出顯示底部的元素-您可能會注意到，邊框確實會影響布局（例如，如果添加了padding或sth）...

Answer 1

帶插圖的框陰影：

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

請參閱jsfiddle以獲得進一步的說明

Answer 2

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

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

大綱

輪廓偏移

---

更新：

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;
}

看我的小提琴

Answer 4

您可以為此使用盒子陰影。 示例（ jsFiddle ）：

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

將在div的內部繪制一個5px的紅色邊框-無需更改位置，高度等。同樣不要忘記添加各種瀏覽器前綴（例如-webkit- -o- ， -o- -moz ， -o- ），我只是將它們留了下來簡單。

編輯：與border-box和outline相比，優點是，您可以很好地對其進行動畫處理：

box-shadow ： jsFiddle與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+ */
}

請記住，框大小調整是CSS3屬性，在IE7和IE6中不起作用。

這里是有關該主題的更多信息： CSS Box Model如何工作

干杯，希望對您有幫助。

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

這是一篇有關偽元素的有趣文章： 一大堆驚人的東西偽元素可以做到