将边框放在DIV的内部，而不是在其边缘

我有一个<div>元素，我想给它加一个边框。 我知道我可以写style="border:1px solid black"，但这在div的两边增加了2px，这不是我想要的。

我宁可让这个边框在离DIV边缘-1px的地方。div本身是100px x 100px，如果我添加一个边框，那么我必须做一些数学运算来使边框出现。

有没有什么方法可以让边框出现，并确保方框仍然是100px（包括边框）？

alex
已编辑的问题 26日 一月 2015 в 4:38
编程
css3 html css border
7日 三月 2012 в 12:16
36 种观点
解决办法

设置 "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>
Gajus
编辑本段答案22日 八月 2015 в 7:28
评论(10)

你也可以像这样使用盒状阴影。

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 (box-shadow feature) 了解更多信息。

mkelley33
编辑本段答案2日 八月 2014 в 10:44
评论(14)

为了在新旧浏览器之间保持一致的渲染，添加一个双容器，外部是宽度，内部是边界。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

这显然是在你的精确宽度比拥有额外的标记更重要的情况下才这样做的

评论(0)