在边框内放置边框，而不是边框
我有一个<div>元素，我想在它上面放一个边框。 我知道我可以写style="border: 1px solid black" ，但是这会在div的两侧增加2px，这不是我想要的。
我宁愿将此边框从div的边缘改为-1px。 div本身是100px x 100px，如果我添加一个边框，那么我必须做一些数学来使边框出现。
有什么方法可以让边框显示，并确保框仍然是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/（悬停查看边框）
这仅适用于现代浏览器。 例如：没有IE 8的支持。 有关更多信息，请参阅caniuse.com（box-shadow功能）。
可能是迟来的答案，但我想分享一下我的发现。 我发现了两个新的方法来解决这个问题，我在这里找不到答案：
内部边框通过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;
}
更多关于大纲：这里
链接地址: http://www.djcxy.com/p/27429.html