具有多个边框的框答案

【问题标题】：Box with multiple borders具有多个边框的框
【发布时间】：2010-12-21 04:21:44
【问题描述】：

我正在尝试对包含帖子的框进行编码和设置样式。我的问题是多个边框（我猜），试图找到最好的编码方式，我更喜欢语义 HTML5 和 CSS3，但如果没有其他方法，我可以用 3 个 div（顶部、中心，底部）带有css背景：url ...，谁能给我一些灯？

如果您检查以下网址，您可以检查我需要完成的工作。

http://dl.dropbox.com/u/3696224/postBox.jpg

如果你注意到它有：

所有框周围都有一个深灰色的边框（#cccccc）；（边界）
该边框和其他浅灰色 (#f7f7f7) 之间的小空间，几乎是白色；
只有白色背景的内容；

有什么建议吗？非常抱歉英语语法，提前谢谢。

问候

PS - 我差点忘记了，我不知道是否需要，但是在盒子周围我有一个盒子阴影（我知道如何做这部分）

【问题讨论】：

这可以用:after 和类似的来完成。
嗨 Chris，谢谢， :after 与主流浏览器兼容吗？我之前尝试过，但没有达到我需要的结果。
兼容所有最新的浏览器和更简洁的 HTML :-) 我得到了它的工作，看看我的答案。

标签： html css border

【解决方案1】：

您只需要 2 个不同的 <div> 元素；一个用于您想要的每个边框。

HTML

<div class="outer">
    <div class="inner">
        CONTENT
    </div>
</div>

CSS

/* colors sampled from image linked in OP */

.outer {
    border: 1px solid #C8C8C8;
    box-shadow: 3px 3px 4px #000;
}

.inner {
    background-color: #FFF;
    border: 5px solid #F8F8F8;
    color: #595959;
    padding: 50px;
    text-align: center;
}

z0mg demo →

【讨论】：

嗨，马特，谢谢你的建议，我真的不知道我是怎么忘记的 :)，它的逻辑，你只是忘记了小空间的边距，但我已经这样做了。再次感谢您的建议。

【解决方案2】：

这是一个不使用杂乱标记的解决方案。在http://jsfiddle.net/7xGKk/ 上查看此操作。

这应该在 Firefox 3.5+、Safari 4+、Chrome 4+、Opera 10+ 和 Internet Explorer 8+ 中正常工作。其他人将获得 7px 的外部颜色边框；如果您想更改三个选定的颜色，您可以删除 .fancyframe background-color 并修改 z-indicies，例如使 #f7f7f7 成为边框。

这与box-shadow 等配合得很好；边框包含在 div 内。

HTML：

<div class="fancyframe">content</div>

CSS：

.fancyframe {
    background-color: white;
    border: 7px solid #cccccc;
    position: relative;
    /* The rest of this block is purely stylistic to make it look precisely
       like the original image except for font. */
    padding: 50px;
    text-align: center;
    text-transform: uppercase;
    line-height: 4em;
    font-size: 50px;
    width: 492px;
    font-family: Impact, sans-serif;
    color: #595959;
}
.fancyframe:before {
    content: "";
    margin: -6px;
    position: absolute;
    border: 6px solid #ffffff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fancyframe:after {
    content: "";
    margin: -5px;
    position: absolute;
    border: 5px solid #f8f8f8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：

你摇滚！真的很感激，非常感谢，就像一个魅力:)。但是我有一个问题，如果你知道我该如何解决它，如果我在内容中有浮动元素，它就会崩溃。我已经在 .fancyframe 之后清除了浮动，但它不起作用。再次感谢。
我忘了说，我在选择文本和点击链接时也遇到了问题，你知道为什么吗？如果你愿意，我可以给你一个我一直在测试的链接。
@Mambley：如果里面有浮动元素，你需要确保它们在里面也被清除； “clearfix”是这个的标准名称。但是，由于已经使用 :after 标准 CSS hack（:after 内容或 overflow: hidden）将不起作用，所以我相信您需要 <br style="clear: both"> 或类似的（如果您现有的最后一个子元素不会漂浮，你也可以把它放在上面，.fancyframe > :last-child { clear: both; } 可能会起作用，这取决于你在里面有什么）。
@Mambley：关于选择它的内容......对不起，这是我没有想到的一个方面；这是我目前想不出的解决方案。如果您需要访问内部的内容，则内部 div 技术可能是唯一实用的方法。
感谢您的解释，因为我需要在其中浮动一些元素并且还需要选择/单击内容，所以我将使用内部 div 技术。无论如何，我会保留您的解决方案以供将来参考，再次感谢您的帮助。

【解决方案3】：

您也可以使用 -moz-border-top-colors 属性。我在 Mozilla 上对此进行了测试，它可以工作您可以在给定的链接中使用代码。

div{
    width:300px;
    height:300px;
    border-top:10px solid red;
   
-moz-border-top-colors: red red red green green green yellow yellow;

    
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

.postcbox {
  border: 1px #ccc solid;
  background-color: #f7f7f7;
}

.postbox {
  background-color: white;
}


<div class="postcbox">
  <div class="postbox">

  </div>
</div>

【讨论】：

【解决方案5】：

您可以使用box-shadow 属性，box-shadow 的好处是我们可以拥有任意数量的属性，逗号分隔：

box-shadow:0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px; rgba(0,0,0,.6);

JSFiddle

【讨论】：