Коробка с несколькими границами

Question

Я пытаюсь закодировать и оформить поле, в котором будет находиться сообщение. Моя проблема с несколькими границами (я думаю), пытаясь найти лучший способ кодирования, я предпочитаю семантические HTML5 и CSS3, но если нет другого пути, я могу сделать «старый стиль» с 3-мя div внизу) css background: url ..., может, кто-нибудь подскажет, пожалуйста, несколько лампочек?

Если вы проверите следующий URL, вы можете проверить, что мне нужно сделать.

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

Если вы заметили, что оно имеет:

• одна рамка вокруг всей рамки с темно-серым (#cccccc); (Граница)
• небольшое пространство между этой границей и другим светло-серым (# f7f7f7), почти белым;
• и только потом содержимое с белым фоном;

Есть предложения? Очень жаль грамматику английского языка, заранее спасибо.

Привет

PS - Я почти забыл, я не знаю, нужно ли это или нет, но вокруг коробки у меня есть тень от коробки (я знаю, как сделать эту часть)

Answer 1

Вы можете использовать свойство -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;

    
}

<div></div>

Answer 2

Вам нужно только 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 демо →

Answer 3

Вот решение без грязной разметки.Смотрите это в действии на http://jsfiddle.net/7xGKk/.

Это должно работать правильно в Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+ и Internet Explorer 8+.Другие получат внешнюю границу 7px;если вы хотите изменить цвет трех выбранных, вы можете удалить .fancyframe background-color и изменить z-индикаторы, например, чтобы сделать # 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 4

Вы можете использовать свойство 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

Answer 5

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

.postbox {
  background-color: white;
}


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

  </div>
</div>