CSS 경계 블록 색상 속성

정의와 사용법

border-block-color 속성을 설정하여 요소의 블록 방향의 경계선 색상을 정의합니다。

주의:적용하려면 border-block-color 속성이 적용되려면 설정해야 합니다 border-block-style.

border-block-color 속성의 값을 다양한 방식으로 설정할 수 있습니다：

데이터 끝점의 정보선 색상이 lightblue로 지정되면 border-block-color 속성은 두 가지 값을 가집니다：

border-block-color: pink lightblue;

• 块起始处的边框颜色为 pink
• 데이터 시작점의 정보선 색상이 핑크로 지정됩니다

데이터 끝점의 정보선 색상이 lightblue로 지정되면 border-block-color 만약

border-block-color: pink;

• 속성에 하나의 값이 있습니다:

속성의 시작점과 끝점의 정보선 색상 모두가 핑크로 지정됩니다 border-block-color 속성은 CSS의 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: 색상|투명|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

교재:CSS 테두리

참조:CSS 경계 속성

참조:CSS 경계 블록 속성

참조:CSS 경계 블록 끝 색상 속성

참조:CSS 경계 블록 시작 색상 속성

참조:CSS 경계 블록 스타일 속성

참조:CSS 경계 아래 너비 속성

참조:CSS border-left-width 속성

참조:CSS border-right-width 속성

참조:CSS border-top-width 속성

참조:CSS 월링 모드 속성