我有一个<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属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
其他回答
雅虎这真的是可能的。我找到了。
对于底部边界:
div {box-shadow: 0px -3px 0px red inset; }
Top Border:
div {box-shadow: 0px 3px 0px red inset; }
你可以用偏移量来查看大纲，但这需要一些填充来存在于你的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的边缘，以适合你喜欢的。
11年后，答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。
最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度，而不是在它周围添加1px的边界，或者你可以为div 100x100px做一个背景图像，并在上面画一个边界。
虽然这个问题已经通过使用box-shadow和outline属性的解决方案得到了充分的回答，但我想稍微扩展一下 对于所有那些降落在这里(像我自己)寻找一个解决方案的内边界偏移
假设你有一个100px x 100px的黑色div，你需要用白色边框来嵌入它——它的内偏移量为5px(比如说)——这仍然可以用上面的属性来完成。
不必
这里的技巧是知道允许多个盒子阴影，其中第一个阴影在顶部，随后的阴影具有较低的z顺序。
有了这些知识，盒影的声明将是:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div { 宽度:100 px; 身高:100 px; 背景:黑色; 盒影:插入0 0 0 5px黑色，插入0 0 0 10px白色; ｝ < div > < / div >
基本上，这个声明说的是:首先渲染最后一个(10px白色)阴影，然后渲染上面的前5px黑色阴影。
用Outline -offset勾勒轮廓
为达到与上述相同的效果，概要声明如下:
outline: 5px solid white;
outline-offset: -10px;
div { 宽度:100 px; 身高:100 px; 背景:黑色; 轮廓:5px纯白色; outline-offset: -10 px; ｝ < div > < / div >
注意:IE不支持outline-offset，如果这对你很重要的话。
Codepen演示
