Я хочу добавить прописку на границе css. Потяните его внутрь div, подальше от края. Возможно ли это с помощью css (css3 отлично, webkit).
Вот дизайн.
Я сделал это, поместив div внутри div, затем давая границу внутреннему div. Я хочу сделать разметку тонкой, насколько это возможно, поэтому я хочу использовать только один div, если это возможно.
Спасибо.
Вы должны иметь возможность сделать это с помощью свойства контура CSS:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Вместо границ вы можете использовать свойство outline:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
К сожалению, без добавления другого div, я не думаю, что вы можете сделать это только с помощью CSS.
Чем сложнее ваш дизайн, тем более вероятно, что вам понадобятся посторонние теги html.
Другой (также не большой) вариант - это фон с изображением или если вам почему-то становится лучше, вы можете добавить элементы на стороне клиента с помощью JQuery, тем самым сохраняя "чистоту" файлов на стороне сервера.
Желаем удачи.
Вы можете сделать это, создав внутренний 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>
Нет, это невозможно. Заполнение, край и граница - это все части элементов, вы не можете дать границу или границу границы.
Может быть, если вы опубликуете пример того, что вы пытаетесь сделать, мы можем предложить альтернативные решения?
-update- Глядя на ваш пример, я боюсь, что это все еще невозможно, по крайней мере, не только с одним div. Я тоже не поклонник divitis, но дополнительный div, вероятно, лучший вариант в этом случае.
Прокладка вокруг границы (которая будет отделять ее от края) называется "margin": для получения дополнительной информации см. Модель коробки.