Прокладка на границе div

Я хочу добавить прописку на границе css. Потяните его внутрь div, подальше от края. Возможно ли это с помощью css (css3 отлично, webkit).

Вот дизайн.

Border Example

Я сделал это, поместив div внутри div, затем давая границу внутреннему div. Я хочу сделать разметку тонкой, насколько это возможно, поэтому я хочу использовать только один div, если это возможно.

Спасибо.

Ответы

Ответ 1

Вы должны иметь возможность сделать это с помощью свойства контура CSS:

<style>
.outer {
       outline: 2px solid #CCC;
       border: 1px solid #999;
       background-color: #999;
       }
</style>

<div class="outer">
example
</div>

Ответ 2

Вместо границ вы можете использовать свойство outline:

div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;    
}

http://jsfiddle.net/H7KdA/

Ответ 3

К сожалению, без добавления другого div, я не думаю, что вы можете сделать это только с помощью CSS.

Чем сложнее ваш дизайн, тем более вероятно, что вам понадобятся посторонние теги html.

Другой (также не большой) вариант - это фон с изображением или если вам почему-то становится лучше, вы можете добавить элементы на стороне клиента с помощью JQuery, тем самым сохраняя "чистоту" файлов на стороне сервера.

Желаем удачи.

Ответ 4

Вы можете сделать это, создав внутренний div с нужными границами и внешний div с таблицей display: table. Что-то вроде этого:

<style>
    .outer {
        background: #ccc;
        display: table;
        width: 400px;
    }

    .inner {
        border: 2px dashed #999;
        height: 50px;
        margin: 5px;
    }

</style>

<div class="outer">

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

</div>

Ответ 5

Нет, это невозможно. Заполнение, край и граница - это все части элементов, вы не можете дать границу или границу границы.

Может быть, если вы опубликуете пример того, что вы пытаетесь сделать, мы можем предложить альтернативные решения?

-update- Глядя на ваш пример, я боюсь, что это все еще невозможно, по крайней мере, не только с одним div. Я тоже не поклонник divitis, но дополнительный div, вероятно, лучший вариант в этом случае.

Ответ 6

Прокладка вокруг границы (которая будет отделять ее от края) называется "margin": для получения дополнительной информации см. Модель коробки.