CSS 边框：与对象边缘的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5068650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Borders: Distance from Object Edge?
提问by Will D. White
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
快速提问。我正在写一些代码，并且很好奇是否有办法在对象内 5px 的 div 上添加边框 - 而不是在 div 的实际边缘。我检查了 WC3 并没有看到任何规格 - 但我可能错过了它。
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
在我的例子中，我会在 div 内使用一个 5px 的虚线边框，来创建一个效果，就像 div 已经缝到网站的其余部分一样。我可以用 background-image 很容易地做到这一点，但是当一两行 css 可以做到时，为什么要添加 KB。
I would assume it would be something like "border-position" or "border-distance".
我认为它类似于“边界位置”或“边界距离”。
Thanks in advance.
提前致谢。
采纳答案by David says reinstate Monica
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
我从未遇到过与此类似的任何财产，所以我不得不简单地说，“不”。
But then I'd feel bad for that, so all I could really suggest is wrapping the divyou wish to 'sew on' within another divand styling the parent with the same background-colorto emulate the look you're after. Here's some css for a possible take:
但是我会为此感到难过，所以我真正建议的只是将div您希望“缝制”在另一个中，div并使用相同的样式为父对象设置样式background-color以模仿您所追求的外观。这是一些可能的CSS：
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
还有一些html：
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
好的，刚刚重新发现了这个答案（感谢投票者！），我现在可以提供一个实际的纯 CSS 无无关元素解决方案，使用box-shadow：
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}?
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-coloras the element itself gives the illusion that the borderis within the element, while it's actually a shadow of the element extending out fromthe element.
第四个参数是关键，它定义了，呃，阴影的“扩散”（第三个参数定义了“模糊”/“扩散”，在这种情况下是0），使用与background-color元素本身相同的方式给人一种错觉的border是元素中，而它实际上是延伸出元素的影子从元素。
回答by Mene
Thats what IE used to do in quirks mode. With CSS3 box-sizingyou can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.htmlfor more infos.
这就是 IE 过去在怪癖模式下所做的。使用 CSS3，box-sizing您可以在两种模式之间切换，但我不确定目前的支持情况如何，请参阅http://www.quirksmode.org/css/box.html了解更多信息。
