将边框放置在 div 内部而不是其边缘

将 box-sizing 属性设置为 border-box：

div { 框尺寸：边框框； -moz-box-sizing：边框框； -webkit-box-sizing：边框框；宽度：100px；高度：100px；边框：20px 实心#f00；背景：#00f；边距：10px； } div + div { 边框：10px 纯红色； }

它适用于 IE8 & above。

---

你也可以像这样使用 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 种新方法，但我在答案中没有找到：

通过 box-shadow css 属性的内边框

是的，box-shadow 用于向元素添加 box-shadows。但是您可以指定 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 边框和“正常”边框之间的区别。这样，您的边框和框宽度总共为 100 像素，包括边框。

有关 box-shadow 的更多信息：here

边框通过轮廓 css 属性

这是另一种方法，但这样边界将在框外。这是an example。如下示例所示，可以使用 css outline 属性，设置不影响元素宽度和高度的边框。这样，边框宽度不会添加到元素的宽度上。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

更多关于大纲：here

---

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

对于底部边框：

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

对于顶部边框：

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

---

您可以将属性 outline 和 outline-offset 与负值一起使用，而不是使用常规 border，这对我有用：

div{高度：100px；宽度：100px；背景颜色：灰色；边距底部：10px； } div#border{ 边框：2px 纯红色； } div#outline{ 轮廓：2px 纯红色；轮廓偏移：-2px； } 使用常规边框。

使用轮廓和轮廓偏移。

---

虽然这个问题已经通过使用 box-shadow 和 outline 属性的解决方案得到了充分的回答，但我想稍微扩展一下对于所有已经登陆这里的人（比如我自己）寻找带有 < 的内部边界的解决方案strong>抵消

所以假设你有一个黑色的 100px x 100px div 并且你需要用白色边框插入它 - 它的 inner offset 为 5px（比方说） - 这仍然可以用上面的方法完成特性。

盒子阴影

这里的技巧是要知道允许多个框阴影，其中第一个阴影在顶部，随后的阴影具有较低的 z 顺序。

有了这些知识，box-shadow 声明将是：

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div { 宽度：100px;高度：100px；背景：黑色； box-shadow: inset 0 0 0 5px 黑色，inset 0 0 0 10px 白色； }

基本上，该声明的意思是：首先渲染最后一个（10px 白色）阴影，然后在其上方渲染前一个 5px 黑色阴影。

带有轮廓偏移的轮廓

对于与上述相同的效果，大纲声明将是：

outline: 5px solid white;
outline-offset: -10px;

div { 宽度：100px;高度：100px；背景：黑色；轮廓：5px 纯白色；轮廓偏移：-10px； }

注意： outline-offset isn't supported by IE 如果这对您很重要。

Codepen 演示

---

使用 pseudo element：

.button { 背景：#333;颜色：#fff;向左飘浮;填充：20px；边距：20px；位置：相对； } .button::after { 内容：'';位置：绝对；顶部：0；右：0；底部：0；左：0；边框：5px 实心#f00； }

使用 ::after 您正在设置所选元素的虚拟最后一个子元素的样式。 content 属性创建一个匿名 replaced element。

我们使用相对于父元素的绝对位置来包含伪元素。然后，您可以自由地在主元素的背景中使用任何自定义背景和/或边框。

这种方法不影响主元素内容的放置，这与使用 box-sizing: border-box; 不同。

考虑这个例子：

.parent { 宽度：200px; } .button { 背景：#333;颜色：#fff;填充：20px；边框：5px 实心#f00；左边框宽度：20px； box-sizing：边框框； }

这里 .button 的宽度是使用父元素来限制的。设置 border-left-width 会调整内容框的大小，从而调整文本的位置。

.parent { 宽度：200px; } .button { 背景：#333;颜色：#fff;填充：20px；位置：相对； } .button::after { 内容：'';位置：绝对；顶部：0；右：0；底部：0；左：0；边框：5px 实心#f00；左边框宽度：20px； }

使用伪元素方法不会影响内容框的大小。

根据应用程序，使用伪元素的方法可能是也可能不是理想的行为。

---

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

---

为了在新旧浏览器之间保持一致的渲染，添加一个双容器，外部带有宽度，内部带有边框。

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

这显然只有在您的精确宽度比额外标记更重要的情况下！

---

如果使用 box-sizing：border-box 不仅意味着边框、填充、边距等。所有元素都将进入父元素内部。

div p { 框大小：边框框； -moz-box-sizing：边框框； -webkit-box-sizing：边框框；宽度：150px；高度：100%；边框：20px 实心#f00；背景颜色：#00f；颜色：#fff;填充：10px； }

---

像@Steve 所说的最佳跨浏览器解决方案（主要用于 IE 支持）是制作一个宽度和高度为 98px 的 div，而不是在其周围添加一个 1px 的边框，或者您可以为 div 100x100 px 制作一个背景图像并在其上绘制一个边框。

---

您可以查看带有偏移的轮廓，但这需要在您的 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 上调整边距以使其适合您的喜好。

---

更现代的解决方案可能是使用 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 时才真正有用。

---

我在上面没有看到的一种解决方案是您在输入上进行了填充，我 99% 的时间都会这样做。你可以做一些类似的事情......

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

我喜欢这个的是我有完整的菜单边框+填充+过渡属性的每一边。

---