在边框内放置边框，而不是边框
我有一个<div>元素，我想把一个边框。 我知道我可以写style="border: 1px solid black" ，但是这会在div的两边增加2px，这不是我想要的。
我宁愿这个边界从div的边缘-1px。 该div本身是100px x 100px，如果我添加一个边框，那么我必须做一些math来使边框出现。
有什么办法可以使边框出现，并确保框仍然是100px（包括边框）？
将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>
你也可以像这样使用盒子阴影：
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/ （hover查看边框）
这只适用于现代浏览器。 例如：没有IE 8的支持。 有关更多信息， 请参阅caniuse.com（box-shadowfunction） 。
可能是迟来的答案，但我想分享一下我的发现。 我发现了两个新的方法来解决这个问题，我在这里找不到答案：
通过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; }
更多关于大纲： 这里
雅虎 这真的是可能的。 我find了。
底部边界：
div {box-shadow: 0px -3px 0px red inset; }
对于上边框：
div {box-shadow: 0px 3px 0px red inset; }
使用伪元素 ：
.button { background: #333; color: #fff; float: left; padding: 20px; margin: 20px; position: relative; } .button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 5px solid #f00; }
<div class='button'>Hello</div>
我知道这个比较老，但是由于关键字“border inside”直接使我着迷，所以我想分享一些可能值得一提的发现。 当我在hover状态上添加边框时，我得到了OP正在讨论的效果。 边框广告像素的框，使它跳动的维度。 还有两种方法可以处理这个也适用于IE7。
1）有一个边框已经附加到元素，只是改变颜色。 这样math已经包括在内了。
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; }
为了在新旧浏览器之间进行一致的渲染，添加一个双层容器，外层宽度，内层边框。
<div style="width:100px;"> <div style="border:2px solid #000;"> contents here </div> </div>
这显然只有当你的确切的宽度比有额外的标记更重要！
如果你使用方块大小：边框不仅意味着边框，边距，边距等。所有的元素都会进入父元素的内部。
div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 150px; height:100%; border: 20px solid #f00; background-color: #00f; color:#fff; padding: 10px; }
<div> <p>It was popularised in the 1960s with the release of Letraset sheets</p> </div>
最好的跨浏览器解决scheme（主要用于IE支持）就像@Steve所说的那样，是在宽度和高度上做一个98px的div，而不是在它周围增加一个边框1px，或者你可以为div 100×100 px制作一个背景图片并在其上画一个边框。
