Создание рамок в CSS. Свойство border. Создание рамок средствами CSS Css двойной border
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 », позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.
- - толщина линии один пиксель
- - сплошная линия
- - белый цвет
- - чёрный цвет
- - серый цвет
Сплошная граница элемента
Штриховая граница элемента
Пунктирная граница элемента
Граница элемента двойной линией
Свойство отдельных участков границы
Вдавленная рифленая рамка в объёме
Выпуклая рифленая рамка в объёме
Объемная вдавленная рамка
Объемная выпуклая рамка
Уроки / 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 , тега