CSS 边框：与对象边缘的距离？答案

【问题标题】：CSS Borders: Distance from Object Edge?CSS 边框：与对象边缘的距离？
【发布时间】：2011-02-21 16:43:57
【问题描述】：

快速提问。我正在写一些代码，并且很好奇是否有办法在对象内 5px 的 div 上添加边框 - 因为不是在 div 的实际边缘。我查看了 WC3 并没有看到任何规格 - 但我可能错过了。

在我的例子中，我会在 div 内使用 5px 的虚线边框，以创建一个效果，就像 div 已缝合到网站的其余部分一样。我可以用 background-image 很容易地做到这一点，但为什么要在一行或两行 css 可以做到的时候添加 KB。

我会假设它类似于“边界位置”或“边界距离”。

提前致谢。

【问题讨论】：

标签： css position border

【解决方案1】：

我从来没有遇到过类似这样的房产，所以我不得不简单地说，“不”。

但是我会为此感到难过，所以我真正建议的是将您希望“缝合”的 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;
}

还有一些html：

<div class="wrap">
    <div id="panel">
        <p>This panel should look kinda sewn-on.</p>
    </div>
</div>

最后，A JS Fiddle demo

好的，刚刚重新发现了这个答案（感谢投票者！），我现在可以使用box-shadow 提供一个实际的纯 CSS 无外部元素解决方案：

#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;
}

JS Fiddle demo.

第四个参数是关键，它定义了，呃，阴影的“扩散”（第三个参数定义了“模糊”/“扩散”，在这种情况下是0），使用相同的@987654331 @ 因为元素本身给人一种错觉，即border 在元素内，而实际上它是元素的影子从元素延伸出来。

【讨论】：

感谢您的提醒。我也没有看到它——但认为它值得一问。 div wrap 听起来像是一个可行的解决方案。
这帮助我解决了 iPad 应用程序的显示问题，在该问题中，各种颜色的随机框线出现在 div 周围。谢谢！

【解决方案2】：

这就是 IE 过去在 quirks 模式下所做的事情。使用 CSS3 box-sizing 您可以在两种模式之间切换，但我不确定目前的支持情况如何请参阅http://www.quirksmode.org/css/box.html 了解更多信息。

【讨论】：