最好的跨浏览器解决方案(主要是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演示

为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

这显然只在精确宽度比额外标记更重要的情况下才会发生!

雅虎这真的是可能的。我找到了。

对于底部边界:

div {box-shadow: 0px -3px 0px red inset; }

Top Border:

div {box-shadow: 0px 3px 0px red inset; }

一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持，但在IE11中还没有变量(可使用polyfills)。

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

虽然这确实需要一些计算，这是最初的问题想要避免的。我认为这是一个使用计算的好时机，因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。

这个解决方案只有在不需要固定高度的情况下才真正有用。

我知道这有点老了，但由于关键字“内部边界”直接把我带到了这里，我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时，我得到了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;
}