我希望能够在我的 Div 之外绘制边框！所以如果我的 div 是 20px x 20px，我想要一个 1px 的边框（所以本质上，我得到一个 22x22px 大的 div）。
我知道我可以将 div 设为 22x22，但出于我的原因，我需要将边框放在外面。
CSS 大纲有效，但我只想要border-bottom 或border-top 的东西，所以像outline-bottom 这样不起作用的东西是我想要的。
有没有办法做到这一点？
谢谢
【问题讨论】：
<div>的背景，而是看到父容器的背景时，这特别有用。只需使用outline 属性而不是border。
将您的 div 放在另一个 div 中，将边框应用到外部 div，其中 n 是您想要它们之间的空间。 p>
【讨论】：
IsisCode 为您提供了一个很好的解决方案。另一种是定位border div inside parent div。检查这个例子http://jsfiddle.net/A2tu9/
UPD：你也可以使用伪元素:after（:before），这样HTML不会被额外的标记污染：
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
【讨论】：
.my-div 上的处理程序捕获点击，请将pointer-events:none; 添加到.my-div:after
我认为您对这两个属性的理解有所偏差。边框影响元素的外边缘，使元素大小不同。 Outline 不会改变元素的大小或位置（不占用空间）并超出边界。根据您的描述，您想使用边框属性。
在浏览器中查看下面的简单示例：
<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 重叠。
【讨论】：
晚了，但我遇到了类似的问题。
我的解决方案是伪元素——没有额外的标记，你可以在不影响宽度的情况下绘制边框。
绝对定位伪元素（与 main 相对定位）和 whammo。
见下文，JSFiddle here。
.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;
}
【讨论】：
试试大纲属性W3Schools - 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>
通常默认情况下，'border:' 将边框放在宽度、测量值之外，添加到整体尺寸，除非您使用 'inset' 值：
div {border: inset solid 1px black};
但是'outline:'是边框外的一个额外边框，当然还会给元素增加额外的宽度/长度。
希望对你有帮助
PS：我也受到启发为你制作了这个：Using borders, outlines, and box-shadows
【讨论】：
为什么不直接使用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>
【讨论】：
box-shadow！底线：box-shadow: 0 1px 0 0 black;