Создание рамок средствами CSS. Двойная рамка css стилями: учимся использовать свойства border и outline Css двойной бордер
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 . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.
Влад Мержевич
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
- outline выводится вокруг элемента (border внутри);
- outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
- создание сложных разноцветных рамок;
- добавление рамки к элементу при наведении на него курсора мыши;
- сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
- для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .
Разноцветные рамки
Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
Рис. 1. Рамка вокруг элемента
Рамка при использовании:hover
При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).
Пример 2. Рамка при наведении
outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.
Пример 3. Рамка при наведении
Рамка вокруг полей формы
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
Рамки через box-shadow
Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .
Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
Рамки - это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались - рамки ячеек внутри таблицы.
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 – «border », позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.
- - толщина линии один пиксель
- - сплошная линия
- - белый цвет
- - чёрный цвет
- - серый цвет
Сплошная граница элемента
Штриховая граница элемента
Пунктирная граница элемента
Граница элемента двойной линией
Свойство отдельных участков границы
Вдавленная рифленая рамка в объёме
Выпуклая рифленая рамка в объёме
Объемная вдавленная рамка
Объемная выпуклая рамка
Уроки / CSS /
Урок 7. Рамка элемента CSS
Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.
border
Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.
Синтаксис у свойства border следующий:
border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.
Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.
Ниже представлены ТИПЫ линий с их названиями:
Как установить рамки у элемента? Делаем следующим образом:
#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}
Если Вы хотите установить одну-две-три рамки с определённой стороны , то указываем так:
border-top
— рамка сверху;
border-bottom
— рамка снизу;
border-left
— рамка слева;
border-right
— рамка справа;
Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}
Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none
Empty {
border: none; /* у элемента с классом empty не будет рамки */
}
outline
Outline — это свойство, которое нужно для установки внешней рамки элемента.
Есть два отличия от border
:
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.
outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:
Спасибо за внимание!
Предыдущая статья
Урок 6.
Границы элемента.
Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?
Комментарии к статье (vk.com)
border
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.
Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному параметру. Все три значения указывать не обязательно, ширину и/или цвет можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указана ширина, то будет использовано значение по умолчанию свойства. В таблице, расположенной под синтаксисом, указано значения каких именно свойств можно использовать.
Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.
Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.
CSS-свойство: border
Они добавляют пустое пространство между рамкой блока и его содержимым: текстом, картинками или дочерними тегами. Обычно граница отображается вплотную к содержимому элемента, это полезно только в том случае, если нужно задать рамку вокруг картинки.
Синтаксис
border: border-width border-style border-color|inherit;
Значения свойства
Пример
Здесь содержится какой-то текст.
Результат данного примера в окне браузера:
Как задать цвет, стиль и размер бордюра в боксах.
В языках разметки бордюр(border ), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все.
Атрибут border
Каскадные таблицы стилей дают нам больше возможностей, но обо всем по порядку.
В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width
, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width
— толщина верхнего бордюра
border-right-width
— толщина правого бордюра
border-bottom-width
— толщина нижнего бордюра
border-left-width
— толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;}
(верх право низ лево).
Ширина бордюра может задаваться:
цифрами
DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin
— тонкий бордюр, DIV{border-width:thin}
medium
— средний бордюр, DIV{border-width:medium}
thick
— толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick
.
Так-же мы можем управлять цветом бордюра при помощи border-color
или если быть точнее цветом каждой стороны:
border-top-color
цвет верхнего бордюра;
border-right-color
цвет правого бордюра;
border-bottom-color
цвет нижнего бордюра;
border-left-color
цвет бордюра с левой стороны.
Значение цвета задается как для color
, т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow
, также цвета можно задавать: color:#000000
, color:#AF0
, color:rgb(255,0,0)
или color:rgb(100%, 0%, 0%)
.
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0)
. Например color:lime
= color:#00ff00
= color:#0F0
= color:rgb(0%, 100%, 0%)
, а для браузера все равно color:rgb(0,255,0)
, т.е. он вычислит это значение.
Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style
) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style
стиль верхнего бордюра;
border-right-style
стиль правого бордюра;
border-bottom-style
стиль нижнего бордюра;
border-left-style
стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none
— Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden
— Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted
— Бордюр из точек.
4)border-style:dashed
— Бордюр из пунктирной линии.
5)border-style:solid
— Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double
— Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove
— Бордюр выглядит как вырезанный в канве.
8)border-style:ridge
— Бордюр выглядит как выступающий над канвой.
9)border-style:inset
— Весь бокс выглядит как вдавленный в канву.
10)border-style:outset
— Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.
Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border
подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;}
, но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px}
, т.е. задается только одно значения.
Для того чтобы управлять не всем бордюром, а каждой частью в отдельности существуют правила:
{border-top: размер стиль цвет;}
Управление верхним бордюром;
{border-right: размер стиль цвет;}
Управление бордюром справа;
{border-bottom: размер стиль цвет;}
Управление нижним бордюром;
{border-left: размер стиль цвет;}
Управление бордюром слева.
Эти правила можно использовать как по отдельность так и все вместе.
Исключением есть вот такое правило:
H1{
border: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.
По бордюрам для элементов у меня все, разве что некоторые свойства рассмотрим когда доберемся до таблиц и прочих исключений.
CSS: border. Границы элемента.
CSS3 Границы
CSS3 Границы
С помощью CSS3, вы можете создавать закругленные границы, добавлять тень к контейнерам и использовать изображение в качестве границы — без применения дизайнерской программы, наподобие Photoshop.
В этом уроке вы узнаете о следующих свойствах границы:
- border-radius
- box-shadow
- border-image
Поддержка Браузерами
| Свойство | Поддержка Браузерами |
|---|---|
| border-radius | |
| box-shadow | |
| border-image |
Internet Explorer 9 поддерживает некоторые из новых свойств границы.
Firefox требует приставки -moz- для border-image.
Chrome и Safari требует приставки -webkit- для border-image.
Opera требует приставки -o- для border-image.
Safari также требует приставки -webkit- для box-shadow.
Opera поддерживает новые свойства границы.
CSS3 Закругленные Углы
Добавление закругленных углов в CSS2 было хитрым. Мы должны были использовать различные изображения для каждого угла.
В CSS3, создание закругленных углов является простым.
В CSS3, свойство border-radius используется для создания закругленных углов:
Этот блок имеет закругленные углы!
CSS3 Тень Контейнера
В CSS3, свойство box-shadow используется для добавления тени к контейнерам:
CSS3 Граница-Изображение
Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение!
Оригинальное изображение, используемое для создания границы ваше:
Новые Свойства Границы
Атрибут border
Атрибут border , тега
