radius, color, style и другие css свойства border
В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы () элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.
Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.
Толщина границ задается свойством , при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.
Синтаксис кода
Давайте разберем пример записи свойства:
| border-image: url (images/bg-image.png ) 30 round round; |
url (images/bg-image.png) — адрес фоновой картинки.
30 — может быть одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления картинки. Сами единицы не пишутся, только число (10, а не 10px). На рисунке красными линиями выделены необходимые для создания рамки области.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в таблице.
round round — два параметра (для горизонтальных и вертикальных границ соответственно). Могут принимать одно из трех значений. Результат можно увидеть на картинках.
stretch — Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat — Повторяет рисунок границы.
round — Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.
Совместимость с браузерами
К сожалению, не все версии браузеров поддерживают свойство border-image. Для лучшей совместимости желательно прописать свойство для всех браузеров.
Пример кода:
| border-style : solid ; border-width : 27px ; -moz-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -webkit-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -o-border-image: url (http://mysite.ru/border.png ) 27 round stretch; border-image: url (http://mysite.ru/border.png ) 27 round stretch; |
Автоматизация
В сети есть инструменты, которые оказывают нам помощь в написании кода. Для свойства border-image есть очень удобный конструктор . Вы просто загружаете туда свою картинку границы (кстати, их очень много можно найти в инете). При помощи ползунков делите картинку на области, задаете толщину границ и параметры повторения.
Причем, сразу же, в онлайн режиме видите результат (то, что получится в итоге).
Когда добиваетесь неодходимого результата, Вам остается только скопировать сгенерированный код и вставить его в код страницы (файла css).
Очень просто и удобно.
Заключение
На этом мы заканчиваем рассмотрение свойств границ в CSS. Я с Вами не прощаюсь. В ближайшее время мы продолжим обучение верстке. Подписывайтесь на обновления … и… До встречи!
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | {1,4} |
| # | Повторять один или больше раз через запятую. | # |
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
Пример
borderПознание текста, не учитывая количества слогов, стоящих между ударениями, дает ямб. Эти слова совершенно справедливы, однако генеративная поэтика аннигилирует урбанистический скрытый смысл.
В данном примере вокруг блока добавляется двойная граница. Результат показан на
Свойство border-color | CSS справочник
CSS свойстваОпределение и применение
CSS свойство border-color устанавливает цвет для всех границ в одном объявлении. Это свойство может иметь от одного до четырех значений.
Поддержка браузерами
Internet Explorer 6 (и более ранние версии) не поддерживает значение свойства «transparent».
CSS синтаксис:
border-color:"color | transparent | initial | inherit";
JavaScript синтаксис:
object.style.borderColor = "orange"
Значения свойства
| Значение | Описание |
|---|---|
| color | Задает цвет границ. По умолчанию — черный цвет. |
| transparent | Указывает, что цвет границы должен быть прозрачным. IE6 (и более ранние версии) не поддерживает данное значение. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Да.Пример использования
Для запоминания порядка расстановки цветов в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L -left). По такому же принципу задаются отступы и поля в свойствах padding и margin.
<!DOCTYPE html>
<html>
<head>
<title>Ширина границ.</title>
<style>
.primer1 {
border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-color : red green blue yellow; /* задаём цвета для границ Top-Right-Bottom-Left */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
.primer2 {
border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-color : red green blue; /* задаём цвета для границ Top-Right&Left-Bottom */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
.primer3 {
border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-color : red green; /* задаём цвета для границ Top&Bottom-Right&Left */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
.primer4 {
border:10px solid; /* задаём сплошную границу шириной 10px для всех сторон */
border-color : red; /* задаём цвет для всех границ красный Top&Right&Bottom&Left */
text-align: center; /* задаём выравнивание текста по центру */
width: 150px; /* задаём ширину блока */
}
</style>
</head>
<body>
<p class = "primer1">border-color: red green blue yellow;</p>
<p class = "primer2">border-color: red green blue;</p>
<p class = "primer3">border-color: red green;</p>
<p class = "primer4">border-color: red;</p>
</body>
</html>
Пример указания цвета границ.CSS свойстваCSS свойство border-color
Это свойство определяет цвет всех четырех сторон рамки HTML элемента. Свойство border-color может принимать от одного до четырех значений.
Например:
- border-color: red green blue pink;
- верхняя сторона рамки красная (red)
- правая сторона рамки зеленая (green)
- нижняя сторона рамки синяя (blue)
- левая сторона рамки розовая (pink)
- border-color: red green blue;
- верхняя сторона рамки красная (red)
- правая и левая стороны рамки зеленые (green)
- нижняя сторона рамки синяя (blue)
- border-color: red green;
- верхняя и нижняя стороны рамки красные (red)
- правая и левая стороны рамки зеленые (green)
- border-color: red;
- все четыре стороны рамки красные (red)
Внимание: Следует всегда определять свойство border-style перед свойством border-color. Элемент должен иметь рамку, прежде чем менять ее цвет.
CSS синтаксис
border-color: цвет | transparent | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| цвет | Устанавливает цвет рамки (см. Как использовать цвета). |
| transparent | Значение по умолчанию. Устанавливает, что цвет рамки должен быть прозрачным. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример
Устанавливаем цвет для четырех сторон рамки параграфа
p {
border-style: solid;
border-color: #ff0000 #0000ff;
}
seodon.ru | CSS справочник — border-color
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS border-color используется для указания разного цвета для каждой стороны рамки элемента.
Если цвет рамки со всех сторон одинаковый, то можно использовать свойство CSS border.
Тип свойства
Назначение: рамки.
Применяется: ко всем элементам.
Наследуется: нет.
Значения
Значением свойства CSS border-color является указание цвета рамки одним из следующих способов:
- Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
- HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
- Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
- transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
- inherit — наследует значение CSS border-color от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: совпадает с цветом текста элемента (CSS color).
Border-color может иметь от одного до четырех (через пробел) значений цвета, при этом будут соблюдаться эти правила:
- Одно значение — цвет рамки со всех сторон одинаковый.
- Два значения — первое задает цвет верхней и нижней границы, а второе — левой и правой.
- Три значения — первое указывает цвет верхней границы, второе — левой и правой, третье — нижней границы рамки.
- Четыре значения — начиная с верхней границы и по часовой стрелке: для верхней, для правой, для нижней, для левой границы.
Синтаксис
border-color: [цвет | transparent] {1,4} | inherit
Пример CSS: использование border-color
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство border-color</title>
<style type="text/css">
h2 {
border-style: solid; /* стиль рамки заголовка */
border-color: green red; /* цвет сторон рамки */
padding: 3px; /* внутренние отступы */
}
p {
border-style: dotted;
border-color: red transparent blue;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Параграф текста.</p>
</body>
</html>Результат примера
Результат. Использование свойства CSS border-color.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit. При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.