HTML-запрос границы

Question

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

Я пытался использовать рамку: 3px double # 000; но, к сожалению, это не дало желаемого эффекта. Граница оказалась внутри div, и пространство между двумя границами было того же цвета, что и фон div.

Надеюсь, я четко объяснил свой вопрос. Заранее спасибо за любую помощь.

Answer 1

Этого можно добиться, используя свойство box3 shadow в CSS3 и установив низкие значения для разброса и размытия. Проверьте это в http://www.sitepoint.com/css3-multiple-borders/

Answer 2

Я бы рекомендовал использовать технику css3, но если вам нужно поддерживать более старые браузеры, такие как ie8 / 7/6, просто поместите div вокруг другого элемента.

.box {border:1px solid red;}
.box > div {padding:2px;}

<div class="box">
    <div>Hello</div>
</div>

Answer 3

Как насчет упаковки div в другое div?Что-то вроде ...

<div style='background-color: white; padding: 1px; border: 1px solid black;'>
    <div style='background-color: yellow;'>my text stuff goes here</div>
</div>

Answer 4

если вам требуется поддержка только современного браузера, вы можете использовать CSS3 и определять несколько границ одного и того же элемента с изображениями или сплошными цветами, в противном случае используйте стили: после или: перед псевдоэлементами:

см.
http://tnels.com/2010/09/13/multiple-borders-in-css3/
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/