Виды рамок css. CSS: border. Границы элемента. Вдавленная линия CSS

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; }

Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

Метод 5: свойство border-image

Еще одним новым методом является часто забываемое свойство 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 */ }

Знаете другой метод?

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

Приветствую всех читателей текущей публикации. Сегодня я расскажу вам, как создается двойная рамка css-инструментами. Вы познакомитесь с такими свойствами, как border и outline, а также узнаете, какие функции они выполняют.

Прочитав данную статью, вы пополните свой арсенал знаний новыми интересными фишками создания теней вокруг границ и освоите технологию создания рамок, состоящих из разных цветов. К тому же я хочу затронуть тему, касающуюся псевдоэлементов, которые значительно расширяют возможности верстки на веб-языках и css. Ну что ж, давайте приступим к делу!

Border и его возможности

Начну с известного свойства border. Оно часто используется в программном коде, и в моих предыдущих публикациях я косвенно затрагивал его не раз. Данное свойство является универсальным и очень гибким.

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

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

Border предусматривает возможность определения стиля, толщины и цвета границ как для всех сторон сразу, так и для конкретной области. Для этого нужно к слову border добавить название стороны с дефисом. К примеру, border-bottom.

Стиль границ может быть совершенно разным:

• пунктирная (dashed)
• точечная (dotted)
• сплошная (solid)
• двойная (double)
• объемная (groove, outset, ridge, inset) линии

Outline и его возможности

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

И все же существуют и другие отличия. Так, outline не влияет на расположение объекта среди другого контента и не изменяет его толщины, что нельзя сказать о предыдущем свойстве.

К тому же данный css-элемент не обладает особой гибкостью. Указанные верстальщиком значения применяются ко всем сторонам внешней рамки и работать только с одной стороной не получится.

Как и border, в текущем свойстве можно устанавливать разный стиль границам. При чем их наименования такие же, как и в предыдущем элементе css.

Что такое псевдоэлементы и для чего они могут пригодиться

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

Итак, псевдоэлементы нужны для форматирования той области элементов, для которой в дереве документа не существует каких-либо селекторов или определений.

Не путайте с псевдоклассами. Они в свою очередь форматируют существующие селекторы и элементы.

В современных правилах определения псевдоэлементов используется двойное двоеточие (:after). Однако если вы используете просто «:», то валидатор пропустит код и не выдаст ошибки.

На сегодняшний день существует множество псевдоэлементов. Ниже в таблице я перечислил популярные.

Хочу отметить некую особенность применения первых двух псевдоэлементов: они всегда взаимодействуют вместе с свойством, в котором и прописывается сам текст – content.

Практическая часть

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

Ниже я прикрепил код программы, в которой, как и обещал, реализовал объекты с двойной цветной рамкой. Также некоторым я добавил тень.

Напомню, что это возможно реализовать при помощи такого свойства, как box-shadow . Для него можно указать до пяти значений, которые будут отвечать соответственно за горизонтальный сдвиг, вертикальный сдвиг, радиус размытия, растяжение тени и ее цвет.

Надеюсь данная публикация была вам полезной. Буду очень рад видеть вас в моих подписчиках. Делитесь ссылкой на мой блог с друзьями. Желаю удачи!

С уважением, Роман

Описание

Универсальное свойство 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 предусматривает два типа рамок: внутренние границы и внешние линии. Свойства 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 . Правило задаёт стиль внешнего контура.

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

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

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

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

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}