Question

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

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

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

如果您发现它有：

所有盒子周围的一个边框，深灰色（#cccccc）; （边界）
该边框与其他浅灰色（＃f7f7f7）之间的小空间，几乎是白色;
然后只有白色背景的内容;

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

此致

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

Answer 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 →

Answer 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%;
}

Answer 3

您可以使用-moz-border-top-colors属性。我在Mozilla上测试了这个并且它有效你可以在给定的链接上玩代码。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 4

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

.postbox {
  background-color: white;
}


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

  </div>
</div>

Answer 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

有多个边框的框

5 个答案:

HTML

CSS