Итак, мы задумались над тем, какими способами можно имитировать двойную границу элемента. Самый распространенный метод заключается в том, чтобы использовать не резиновое фоновое изображение. Но это не лучший способ.
Сегодня мы подготовили для вас 5 различных методов реализации. И только один из них требует применение изображения, остальные же основаны на чистом коде CSS (к тому же, браузерная поддержка очень впечатляет). Дабы оптимизировать коды, мы исключили основные параметры их примеров (типа ширина, высота, фон и так далее). Вы можете ознакомиться с примерами на демо-странице:
Посмотреть демо
Способ 1: Граница + внешняя линия (border + outline)
Данный способ будет работать лишь в тех браузерах, где есть поддержка параметра outline, т.е. во всех, кроме IE6/7. В целом, вы добавляете границу, используя как параметр border, так и outline. Вот CSS-код, который не включает в себя основные параметры, о которых мы говорили выше:
.one {
border: solid 6px #fff;
outline: solid 6px #888;
}
Почему данный способ работает? Потому что параметр outline всегда отображается за пределами блока. Проблема с параметром outline заключается в том, что он не влияет на поток элементов, окружающих его, так что он будет отображаться либо под элементами, либо будет перекрывать их, что абсолютно нежелательно.
Способ 2: Псевдо-класс
Этот способ немного сложнее, так как здесь требуется абсолютное позиционирование границы, что, как известно, сделает её нерезиновой. Но, применив немного хитрости, мы заставили этот способ работать и быть резиновым только вертикально. Вот код:
.two {
border: solid 6px #fff;
position: relative;
z-index: 1;
}
.two:before {
content: "";
display: block;
position: absolute;
top: -12px;
left: -12px;
border: solid 6px #888;
width: 312px;
padding-bottom: 12px;
min-height: 100%;
z-index: 10;
}
Ключевые моменты заключаются в параметре z-index (чтобы псевдо-класс всегда был поверх контента), позиционирование, а также значение min-height. Последний параметр позволяет ему оставаться резиновым.
Способ 3: box-shadow
Как уже было сказано, идея эксперимента заключается в том, чтобы всячески обыграть параметр box-shadow. Лично нам этот способ нравится больше всего, так как здесь всего одна строка кода, в которой новая технология используется в очень непривычном виде.
.three {
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}
Для того чтобы тень выглядела как вторая граница, мы будем использовать две тени (параметры разделены через запятую), параметры смещения и размытия которых равны нулю, что делает тень почти как границу. Ключевой момент здесь заключается в том, чтобы тень была совсем не размыта, тогда она будет похожа на полосу.
Как и в случае с параметром outline, box-shadow не будет влиять на окружающие элементы, поэтому вам придется помучаться с полями, чтобы разместить элемент так, как он бы больше всего был похож на обычный блок с границей.
Хотя, не стоит забывать, что данный способ рассчитан на браузеры, в которых предусмотрена поддержка параметра box-shadow.
Способ 4: Дополнительный DIV
Этот способ подразумевает под собой создание дополнительного div’а для того, чтобы создавать видимость двойной границы. Это единственный из перечисленных здесь способ, который будет работать во всех браузерах (хотя даже он выглядит немного коряво в демо через браузеры IE6/7 из-за настроек полей, но это поправимо). Об этом способе много можно и не говорить, так как тут естественное применение границ и фона:
.four {
border: solid 6px #888;
background: #fff;
width: 312px;
min-height: 312px;
}
.four div {
width: 300px;
min-height: 300px;
background: #222;
margin: 6px auto;
overflow: hidden;
}
Стили в этом способе могут отличаться в зависимости размера и наполнения блока, но, как вы можете видеть, внешний блок на 12 пикселей больше, чем внутренний – это и создает иллюзию двойной границы.
Способ 5: Фоновое изображение
Еще один способ, рассчитанный на современные браузеры, в котором используется часто упущенный параметр CSS3 – border-image:
.five {
border-width: 12px;
-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}
Чтобы подробнее узнать о данном параметре, ознакомьтесь со статьей на сайте SitePoint.
Знаете еще какие-либо способы? Нам в голову пока что ничего не приходит, поэтому, если у вас есть что показать, не медлите, ждем вас в комментариях!
Все данные методы отображены на демо-странице вместе с некоторым кодом javascript, который позволит вам добавить или убрать содержимое каждого блока, чтобы вы могли удостовериться, что блок не закреплен за конкретной строкой.