Атрибут border-block-color CSS

Предыдущая страница border-block
Следующая страница border-block-end

定义和用法

border-block-color 属性设置元素在块方向上的边框颜色。

Примечание:要使 border-block-color 属性生效，必须设置 border-block-style.

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 Результат свойств. Для англоязычных страниц, направлением строки является слева направо, а направлением блока — вниз.

Пример

Пример 1

Установить цвет рамки в направлении блока:

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

Попробуйте сами

Пример 2: сочетание свойства writing-mode

Позиция начала и конца рамки в направлении блока зависит от свойства writing-mode:

div {
  writing-mode: vertical-rl;
  border-block-color: blue;
}

Попробуйте сами

CSS синтаксис

border-block-color: color|transparent|initial|inherit;

Значение свойства

Значение	Описание
color	Указать цвет рамки. По умолчанию цвет — текущий цвет элемента. См. значения CSS цветов, чтобы получить полный список цветов.
transparent	Указать цвет рамки должен быть прозрачным.
initial	Установить это свойство в его значение по умолчанию. См. также initial.
inherit	Преемственность этого свойства из родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию:	Текущий цвет элемента
Инheritability:	Нет
Создание анимации:	Поддерживается. См. также:Свойства анимации.
Версия:	CSS3
JavaScript синтаксис:	object.style.borderBlockColor="pink"