在div上繪製邊框

好吧，我無法解釋我真正需要的東西，所以我會展示它。在div上繪製邊框

或者......如果我給它的話一試：我需要一個邊界，周圍的DIV不，不改變任何東西（寬度，高度，利潤率，填充 - 什麼...），就好像它被畫在的上述div頂部...

例子：

enter image description here

CSS： （靶向具有屬性comp-id元素 - 接壤狀態設置與msp-selected類），我已經試過border

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

，outline和box-sizing:border-box;但以上都沒有維護佈局。

所以，...任何想法如何實現？

UPDATE（這裏是box-sizing - 是的，所有的人 - 做）：

enter image description here

比方說，我們首先強調的上部件（加邊框），然後再下一 - 你可能會注意到，邊界確實影響佈局（如果它增加了填充或某物）...

來源

2013-08-22 Dr.Kameleon

您是否嘗試過在盒子大小的所有前綴，-moz，-webkit？ – Razz

你能告訴我們你正在使用的CSS代碼嗎？ –

你能把紅色div裏面的藍色div放在紅色div上嗎？這樣，藍色的div將不會受到影響。 – user1477388

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

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

將在內部股利畫5px的紅色邊框 - 不改變位置，高度等也不要忘了添加的各種瀏覽器的前綴（如-webkit-，-moz， -o-），我只是爲了簡單而離開他們。

編輯： 的優點相比，border-box和outline是，你可以動畫非常好：

box-shadow：jsFiddle VS border-box：jsFiddle

來源

2013-08-22 14:06:45 tobspr

如果你倒退了，請考慮告訴我爲什麼 – tobspr

這不是我;說實話，你的答案是我目前正在嘗試的（儘管我發現在一兩種情況下有點怪癖......） –

盒陰影與插圖：

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

see the jsfiddle for further explaination

來源

2013-08-22 14:08:13 Razz

自Chrome 9以來，不需要'-webkit'前綴：https ：//developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

安全性比抱歉的好，它只有40個字節。 – Razz

但是'W3C'標準屬性應該是最後一個聲明。 –

您找到了解決方案box-sizing:border-box;。只要確保你包括-webkit和-moz-箱爲其他瀏覽器，像這樣：


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工作。

這裏有更多的話題：How CSS Box Model Works

乾杯，希望幫助你。

來源

2013-08-22 14:10:23 Stan

的'-webkit'前綴還沒有被鍍鉻9需要：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

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 
}

來源

2013-08-22 14:12:01

請看看更新。 –

@ Dr.Kameleon看到更新。 –

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

來源

2013-08-22 14:15:28

我不知道爲什麼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-22 14:26:14

在div上繪製邊框

回答

相關問題