我希望能够在 Div 之外绘制边框！因此，如果我的 div 是 20px x 20px，我想要在其外部有一个 1px 边框（所以本质上，我得到一个 22x22px 大的 div）。
我知道我可以先将 div 设为 22x22，但由于我的原因，我需要将边框设置在外面。
CSS 轮廓有效，但我只想要 border-bottom 或 border-top 的东西，所以像outline-bottom 这样不起作用的东西才是我想要的。
有办法做到这一点吗？
谢谢
我认为您对这两个属性的理解有所偏差。边框影响元素的外边缘，使元素的大小不同。轮廓不会改变元素的大小或位置（不占用空间）并且超出边框。根据您的描述，您想使用 border 属性。
在浏览器中查看下面的简单示例：
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>注意边框如何将底部 div 推倒，但轮廓不会移动顶部 div，并且轮廓实际上与底部 div 重叠。
尝试使用outline属性CSS Outline
轮廓不会干扰元素/div 的宽度和长度！
请单击我在底部提供的链接，查看工作演示，了解制作边框和内/内嵌边框的不同方式，甚至是不破坏元素尺寸的边框！不需要每次都添加额外的 div，正如另一个答案中提到的！
您还可以将边框与轮廓相结合，如果您愿意，还可以将框阴影（也通过链接显示）
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
通常默认情况下，“边框：”将边框放在宽度、测量值的外部，添加到整体尺寸中，除非您使用“插入”值：
div {border: inset solid 1px black};
但是“outline:”是边框之外的额外边框，当然仍然会为元素添加额外的宽度/长度。
PS：我也受到启发为你做这个：使用边框、轮廓和框阴影
IsisCode 为您提供了一个很好的解决方案。另一种是将边框 div inside 父 div 定位。检查这个例子http://jsfiddle.net/A2tu9/
UPD： 您还可以使用伪元素
:after:before.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
为什么不简单地使用
background-clip-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
参见：
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
我根据您的需求分享了两种解决方案：
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
晚了，但我刚刚遇到了类似的问题。
我的解决方案是伪元素 - 没有额外的标记，并且您可以在不影响宽度的情况下绘制边框。
绝对定位伪元素（主元素相对定位）并且whammo。
见下文，JSFiddle在这里。
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
将您的 div 放入另一个 div 中，将边框应用到外部 div，并使用 n 数量的填充/边距，其中 n 是您想要的它们之间的空间。
尝试添加
box-sizing: content-box;
（而不是
box-sizing: border-box;