我有一个<div>元素，我想给它加一个边框。我知道我可以写style="border: 1px solid black"，但这将在div的两侧增加2px，这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px，如果我添加一个边界，那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现，并确保盒子将仍然是100px(包括边界)?
当前回答
一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持，但在IE11中还没有变量(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
虽然这确实需要一些计算，这是最初的问题想要避免的。我认为这是一个使用计算的好时机，因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
其他回答
我在上面没有看到的一个解决方案是在输入上填充，我99%的时间都是这样做的。你可以按照……
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
我喜欢的是，我有一个完整的菜单，每边的边框+填充+过渡属性。
雅虎这真的是可能的。我找到了。
对于底部边界:
div {box-shadow: 0px -3px 0px red inset; }
Top Border:
div {box-shadow: 0px 3px 0px red inset; }
你可以使用属性outline和outline-offset带负值，而不是使用常规边框，适合我:
div { 身高:100 px; 宽度:100 px; 背景颜色:灰色; margin-bottom: 10 px; ｝ {div#边界 边框:2px纯红色; ｝ div #{轮廓 轮廓:2px实心红色; outline-offset: 2 px; ｝ 使用常规边界。 < div id = "边境" > < / div > 使用outline和outline-offset。 < div id = "大纲" > < / div >
为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持，但在IE11中还没有变量(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
虽然这确实需要一些计算，这是最初的问题想要避免的。我认为这是一个使用计算的好时机，因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
