border-block-color
Установите цвет для границ в направлении блока:
#example1 {
border-block-style: solid;
border-block-color: pink;
}
#example2 {
border-block-style: solid;
border-block-color: pink lightblue;
}
Попробуйте сами »
Определение border-block-color
CSS свойство border-block-color
определяет цвет границ элемента в направлении блока.
Примечание: CSS свойство border-block-color
вступит в силу, когда будет установлено свойство border-block-style
Значения для CSS свойства border-block-color
может быть установлено различными способами:
Если свойство border-block-color имеет два значения:
- border-block-color: pink lightblue;
- цвет границы в начале блока pink
- цвет границы в конце блока lightblue
Если свойство border-block-color имеет одно значение:
- border-block-color: pink;
- цвет границы в начале и конце блока pink
CSS свойство
border-block-color
очень похоже на свойства
border-bottom-color
,
border-left-color
,
border-right-color
и
border-top-color
, но свойство
border-block-color
зависит от направления блока.
Примечание: Связанное CSS свойство writing-mode
определяет направление блока. Это влияет на то, где находятся начало и конец блока, а также на результат свойства border-block-color
. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
Значение по умолчанию: | Текущий цвет элемента |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderBlockColor="pink" Попробуй |
Поддержка border-block-color
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-block-color | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Синтаксис border-block-color
border-block-color: color|transparent|initial|inherit;
Значения border-block-color
Значение | Описание | Демонстрация |
---|---|---|
color | Определяет цвет границы. Посмотрите на CSS Значения цвета для получения полного списка возможных значений цвета. Цвет по умолчанию - это текущий цвет элемента | Демо ❯ |
transparent | Определяет, что цвет границы должен быть прозрачным | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-block-color
Свойство writing-mode
На положение цвета границы в начале и в конце в направлении блока влияет CSS свойство writing-mode
:
div {
writing-mode: vertical-rl;
border-block-color: blue;
}
Попробуйте сами »
Страницы по теме border-block-color
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-block свойство: CSS border-block свойство
CSS border-block-end-color свойство: CSS border-block-end-color свойство
CSS border-block-start-color свойство: CSS border-block-start-color свойство
CSS border-block-style свойство: CSS border-block-style свойство
CSS border-bottom-width свойство: CSS border-bottom-width свойство
CSS border-left-width свойство: CSS border-left-width свойство
CSS border-right-width свойство: CSS border-right-width свойство
CSS border-top-width свойство: CSS border-top-width свойство
CSS writing-mode свойство: CSS writing-mode свойство