将边框放在 div 内部而不是在其边缘

Question

我有一个 <div> 元素，我想在它上面加一个边框。我知道我可以写 style="border: 1px solid black" ，但这会在 div 的任一侧添加 2px，这不是我想要的。

我宁愿这个边框距离 div 的边缘为 -1px。 div 本身是 100px x 100px，如果我添加边框，那么我必须做一些数学运算才能使边框出现。

有什么方法可以使边框出现，并确保框仍为 100px（包括边框）？

原文由 TheMonkeyMan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 box-sizing 属性设置为 border-box ：

 div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

 <div>Hello!</div>
<div>Hello!</div>

它适用于 IE8 及更高版本。

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你也可以像这样使用 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（框阴影功能） 。

原文由 caitriona 发布，翻译遵循 CC BY-SA 3.0 许可协议