將邊框放在div內部而不是邊緣

我有一個<div>元素，我想在它上面加一個邊框。 我知道我能夠寫style="border: 1px solid black" ，但這會增長2px到div的任何一側，這不是我想要的。

我寧願讓這個邊界距離div的邊緣是-1px。 div自己是100px x 100px，若是我添加一個邊框，那麼我必須作一些數學來使邊框出現。

有什麼方法可讓邊框出現，並確保框仍然是100px（包括邊框）？

---

#1樓

你也能夠像這樣使用box-shadow：

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

示例： http ： //jsfiddle.net/nVyXS/ （懸停到查看邊框）

這僅適用於現代瀏覽器。 例如：沒有IE 8支持。 有關詳細信息， 請參閱caniuse.com（框陰影功能） 。

---

#2樓

我知道這有點舊，但因爲關鍵詞「border inside」讓我直接來到這裏，我想分享一些可能值得一提的發現。 當我在懸停狀態下添加邊框時，我獲得了OP正在談論的效果。 邊框將像素廣告到框的尺寸，使其變得有彈性。 還有兩種方法能夠解決這個問題，這也適用於IE7。

1）邊框已經附加到元素上，只需更改顏色便可。 這種方式已經包含了數學。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2）以負餘量補償邊界。 這仍然會添加額外的像素，但元素的定位不會跳躍

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

---

#3樓

最好的跨瀏覽器解決方案（主要用於IE支持）如@Steve所說的是在寬度和高度上設置一個div爲98px而不是在它周圍添加1px的邊框，或者你能夠爲div 100x100 px製做背景圖像並在其上繪製邊框。

---

#4樓

多是遲來的回答，但我想與個人發現分享。 我找到了兩個新方法來解決這個問題，我在答案中沒有找到：

內部邊框經過box-shadow css屬性

是的，box-shadow用於向元素添加框陰影。 可是你能夠指定inset陰影，它看起來像一個內邊框而不是陰影。 您只須要將水平和垂直陰影設置爲0px ，並將box-shadow的「 spread 」屬性設置爲您想要的邊框寬度。 所以，對於10px的「內部」邊界，您將編寫如下內容：

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

這是jsFiddle示例，說明了box-shadow邊框和「普通」邊框之間的區別。 這樣你的邊框和盒子寬度總共100px，包括邊框。

關於box-shadow的更多信息： 這裏

經過大綱css屬性邊界

這是另外一種方法，但這種方式邊框將在框外。 這是一個例子 。 以下例所示，您可使用css outline屬性來設置不影響元素寬度和高度的邊框。 這樣，邊框寬度不會添加到元素的寬度。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

更多關於大綱： 這裏

---

#5樓

雅虎 這確實是可能的。 我找到了。

對於底邊：

div {box-shadow: 0px -3px 0px red inset; }

對於頂級邊框：

div {box-shadow: 0px 3px 0px red inset; }