CSS 경계 내 색상 속성

정의와 사용법

border-inline-color 속성이 요소의 행내 방향 경계선 색상을 설정합니다.

주의:속성을 설정하여 border-inline-color 속성이 효과를 발휘하려면 설정해야 합니다 border-inline-style.

border-inline-color 속성의 값은 다양한 방식으로 설정할 수 있습니다:

만약 border-inline-color 속성에 두 가지 값이 있습니다:

border-inline-color: 핑크 파란색;

• 행내 시작점의 경계선 색상이 핑크색입니다
• 행내 종료점의 경계선 색상이 파란색입니다

만약 border-inline-color 속성에 하나의 값이 있습니다:

border-inline-color: blue;

• 행내 시작점과 종료점의 경계선 색상이 모두 파란색입니다

CSS의 border-inline-color 속성과 border-bottom-color그리고border-left-color그리고border-right-color 그리고 border-top-color 속성은 매우 유사하지만 border-inline-color 속성은 행 내 방향에 의존합니다.

주의:와 관련된 CSS 속성 writing-mode그리고text-orientation 그리고 direction 행 내 방향을 정의합니다. 이는 한 행의 시작과 끝 위치, 그리고 border-inline-color 속성의 효과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

예제

예제 1

행 내 방향의 보드에 색상을 설정합니다:

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

직접 시험해 보세요

예제 2: writing-mode 속성과 결합

행 내 방향의 시작과 끝 위치의 보드는 writing-mode 속성의 영향:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

직접 시험해 보세요

예제 3: direction 속성과 결합

행 내 방향의 시작과 끝 위치의 보드는 direction 속성의 영향:

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

직접 시험해 보세요

CSS 문법

border-inline-color: 색상|투명|기본값|thuộc|;

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

강의:CSS 경계선

참조:CSS 경계 속성

참조:CSS 경계 내 속성

참조:CSS border-inline-style 속성

참조:CSS 경계 아래 색상 속성

참조:CSS border-left-color 속성

참조:CSS border-right-color 속성

참조:CSS border-top-color 속성

참조:CSS 방향 속성

참조:CSS 텍스트-오리엔테이션 속성

참조:CSS 쓰기-모드 속성