CSS外部边界
我希望能够在我的部门之外画一个边框！ 所以如果我的div是20px乘20px，我想要一个1px的边框以外（所以本质上，我得到一个div 22x22px大）。
我明白，我可以开始使用div 22×22，但出于我的原因，我需要边界在外面。
CSS大纲的作品，但我只想要边框底部或边框顶部thingy，所以像大纲底部，这是行不通的，是我想要的东西。
有没有办法做到这一点？
谢谢
我想你已经对这两个属性有了一些了解。 边框影响元素的外边缘，使元素的大小不同。 轮廓不会改变元素的大小或位置（不占用空间）并超出边界。 从你的描述你想使用边界属性。
在你的浏览器中看下面的简单例子：
<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> 尝试大纲财产W3Schools – CSS大纲
大纲不会干扰元素/ divs的宽度和长度！
请单击我在底部提供的链接， 查看可以制作边框的不同方式的工作演示 ，以及内部/内嵌边框，即使是不会中断元素尺寸的边框！ 无需每次都添加额外的div，正如另一个答案中提到的！
您也可以将边框与轮廓组合起来，如果您喜欢，也可以通过链接显示框阴影（box-shadows）
<head> <style type="text/css" ref="stylesheet"> div { width:22px; height:22px; outline:1px solid black; } </style> </head> <div> outlined </div>
通常默认情况下，除非使用“inset”值，否则“border：”会将边框置于宽度的外部，度量将其添加到整体尺寸中：
div {border: inset solid 1px black};
但是“outline：”是边框外的额外边框，当然还会为元素增加额外的宽度/长度。
希望这可以帮助
PS：我也被启发为你做这个 ： 使用边框，轮廓和箱形阴影
IsisCode为您提供了一个很好的解决scheme。 另一个是在父div 内定位边界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; }
演示： http : //jsfiddle.net/A2tu9/191/
为什么不简单地使用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
把你的div在另一个div里，用n个填充/页边距把边框应用到外部div，其中n是你想要的空间。
一路迟到，但我碰到类似的问题。 我的解决scheme是伪元素 – 没有额外的标记，你可以绘制边界而不影响宽度。 将伪元素绝对定位（主要定位相对）和whammo。
看下面，JSFiddle这里http://jsfiddle.net/mcx6m/
.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; }
