我有一个<div>元素，我想在其上添加边框。我知道我可以写style="border: 1px solid black"，但这会在div的任意一侧增加2px，这不是我想要的。
我宁愿让这个边界距离div的边缘是-1px。 div本身是100px x 100px，如果我添加边框，那么我必须做一些数学来使边框出现。
有没有办法让边框出现，并确保框仍然是100px（包括边框）？
答案 0 :(得分：594)
将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 & above。
答案 1 :(得分：305)
你也可以像这样使用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支持。 See caniuse.com (box-shadow feature)了解更多信息。
答案 2 :(得分：79)
可能是迟来的答案，但我想与我的调查结果分享。我找到了2个新问题，我在答案中没有找到这个问题：
box-shadow css属性是的，box-shadow用于向元素添加框阴影。但是你可以指定inset阴影，它看起来像一个内边框而不是阴影。您只需将水平和垂直阴影设置为0px，将spread的“box-shadow”属性设置为您想要的边框宽度。因此，对于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的更多信息：here
这是另一种方法，但这种方式边框将在框外。这是an example。
如下例所示，您可以使用css outline属性来设置不影响元素宽度和高度的边框。这样，边框宽度不会添加到元素的宽度。
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
有关大纲的更多信息：here
答案 3 :(得分：37)
雅虎！这确实是可能的。我找到了。
对于底边：
div {box-shadow: 0px -3px 0px red inset; }
对于最高边界：
div {box-shadow: 0px 3px 0px red inset; }
答案 4 :(得分：23)
.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>
使用::after设置所选元素的虚拟最后一个子项的样式。 content属性会创建匿名replaced element。
我们使用相对于父级的绝对位置来包含伪元素。然后你可以自由地在主元素的背景中拥有任何自定义背景和/或边框。
此方法不会影响主要元素内容的放置，这与使用box-sizing: border-box;不同。
考虑这个例子：
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}<div class='parent'>
<div class='button'>Hello</div>
</div>
此处使用父元素约束.button宽度。设置border-left-width会调整内容框大小，从而调整文本的位置。
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}<div class='parent'>
<div class='button'>Hello</div>
</div>
使用伪元素方法不会影响内容框大小。
根据应用程序的不同，使用伪元素的方法可能是也可能不是理想的行为。
答案 5 :(得分：14)
虽然使用box-shadow和outline属性的解决方案已经充分回答了这个问题，但我想稍微扩展一下
对于那些已经到达这里的人（像我一样）寻找内部边界的解决方案偏移
所以，让我们说你有一个黑色的100px x 100px div，你需要用白色边框插入它 - 其中内部偏移为5px（比方说） - 这仍然可以通过上述属性来完成。
这里的技巧是知道允许多个盒阴影，其中第一个阴影位于顶部，后续阴影具有较低的z排序。
根据这些知识，box-shadow声明将是：
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {
width: 100px;
height: 100px;
background: black;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}<div></div>
基本上，该声明所说的是：首先渲染最后一个（10px白色）阴影，然后渲染其前面的5px黑色阴影。
与上述相同的效果大纲声明将是：
outline: 5px solid white;
outline-offset: -10px;
div {
width: 100px;
height: 100px;
background: black;
outline: 5px solid white;
outline-offset: -10px;
}<div></div>
NB： outline-offset isn't supported by IE如果这对您很重要。
答案 6 :(得分：9)
您可以对负值使用属性outline和outline-offset而不是常规的border，对我来说很有效：
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>
答案 7 :(得分：6)
我知道这有点老了，但由于关键词“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;
}
答案 8 :(得分：3)
要在新旧浏览器之间进行一致渲染，请添加一个双容器，外部带宽度，内部带边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只有你的精确宽度比额外加价更重要！
答案 9 :(得分：2)
如果使用box-sizing：border-box不仅意味着边框， 填充，边距等。所有元素都将来自父级 元件。
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>
答案 10 :(得分：0)
最好的跨浏览器解决方案（主要用于IE支持），如@Steve所说的是在宽度和高度上设置一个div为98px而不是在它周围添加一个1px的边框，或者你可以为div 100x100 px制作一个背景图像并绘制一个边框在它上面。
答案 11 :(得分：0)
您可以查看具有偏移的轮廓，但这需要在div上存在一些填充。或者，您可以绝对在其中放置边框div，例如
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
您可能需要在假边框div上摆弄空白以适应您的需要。
答案 12 :(得分：0)
更现代的解决方案可能是使用CSS variables和calc。 calc得到了广泛的支持，但是IE11中尚未提供variables（可用的polyfills）。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
尽管这确实使用了一些计算方法，但最初的问题却希望避免这些计算。我认为这是使用计算的合适时机，因为它们由CSS本身控制。它也不需要额外的标记或挪用以后可能需要的其他css属性。
仅当fixed height isn't needed时，此解决方案才真正有用。
答案 13 :(得分：0)
我上面没有提到的一种解决方案是您对输入进行填充的情况，我有99％的时间这样做。您可以按照...做些什么...
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
我喜欢的是，我拥有每边的边框+填充+过渡属性的完整菜单。