Михаил 2016-06-11 1 HTML и CSS 0

Как делается в css двойная рамка?

Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.

Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}

Ну типичный пример оформления блока.
Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Вот так это выглядит:

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

По умолчанию все выглядит так — тень одинаковых размеров с элементом и лежит четко под ним. Если вы меняете растяжение, то тень начинает выступать за элемент. Именно так можно создавать рамки, абсолютно такие же, как свойством border . Ну а с пятым параметром, я думаю, все понятно — это цвет тени.

Как видите, я просто перечислил параметры для каждой новой тени через запятую. Я думаю, вы уже догадались, что таким же способом можно создать тройную рамку и т.д. Никаких ограничений тут нет. Собственно, как по мне вопрос закрыт, а если у вас есть какие-то вопросы, вы можете писать их в комментарии.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Рамки - это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались - рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border - только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline .

border-width

Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

Border-width: 16px 12px 4px 8px;

border-style

Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style .

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

Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:

border-style: solid double dotted none

border-color

Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.

Border-color: #C85EFA;

border

Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:

P { border: 2px solid green; }

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

• border-top - верхняя граница.
• border-right - правая.
• border-bottom - нижняя.
• border-left - левая.

P { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width , только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width . Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Синтаксис

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

document.getElementById("elementID ").style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

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

Толщина рамки

Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для

,

,

и

Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Сокращённая запись

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

P { border-width: 1px; border-style: solid; border-color: blue; }

можно объединить в:

P { border: 1px solid blue; }

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

Border-image - свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Upd: В Firefox работают начиная с 29-й версии .

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .

Возможные значения:

<проценты> - рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты. <числа> - пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill - ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

Сумма значений противоположных сторон должна быть меньше размера картинки, иначе будет нечем заполнять пространство между углами.

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

Свойство определяет как будут заполняться промежутки между углами.

Возможные значения: stretch - растягивает заполняющий участок картинки. Значение по умолчанию; repeat - повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round - заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space - действует похоже на repeat . Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе - за левую и правую.

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример .

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: <длина> - значения в px или em; <%> - значения в процентах относительно размера изображения; <числа> - числовое значение, на которое умножается border-width auto - ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: <длина> - значения в px или em; <числа> - числовое значение, на которое умножается border-width .

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.