CSS 박스 인라인 끝 색상 속성

정의와 사용법

border-inline-end-color 속성을 설정하여 요소의 행 내 방향 끝에 위치한 경계선 색상을 정의합니다

주의:이를 위해 border-inline-end-color 속성이 적용되려면 설정해야 합니다 border-inline-end-style 속성。

CSS border-inline-end-color 속성과 border-bottom-color、border-left-color、border-right-color 와 border-top-color 속성은 매우 유사하지만 border-inline-end-color 속성은 inline 방향에 의존합니다.

주의:의 속성 writing-mode、와 관련된 CSS 속성 와 direction inline 방향을 정의합니다. 이는 한 행의 시작과 끝 위치 및 border-inline-end-color 속성의 효과. 영어 페이지에서는 inline 방향은 왼쪽에서 오른쪽으로, block 방향은 아래로 갑니다.

예제

예제 1

inline 방향 끝의 테두리 색상을 설정하십시오:

div {
  border-inline-end-style: solid;
  border-inline-end-color: pink;
}

직접 시도해 보세요

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

inline 방향의 끝에 있는 테두리 위치는 writing-mode 속성의 영향:

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

직접 시도해 보세요

예제 3: direction 속성과 결합

inline 방향의 끝에 있는 테두리 위치는 direction 속성의 영향:

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

직접 시도해 보세요

CSS 문법

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

속성 값

값 설명
색상 빠른 색상을 지정합니다. 기본적으로는 요소의 현재 색상입니다. 참조:CSS 색상 값.
투명 빠른 색상을 지정해야 합니다.
기본값 이 속성을 기본 값으로 설정합니다. 참조: 기본값.
thuộc 부모 요소에서 이 속성을 thừa kế합니다. 참조: thuộc.

기술 세부 사항

기본 값: 요소의 현재 색상
thừa kế: 아니요
애니메이션 제작: 지원. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.borderInlineEndColor="pink"

브라우저 지원

표의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
69.0 79.0 41.0 12.1 56.0

관련 페이지

教程:CSS 경계선

참조:CSS 박스 백그라운드 속성

참조:CSS 박스 인라인 속성

참조:CSS 박스 인라인 끝 스타일 속성

참조:CSS border-inline-start-color 속성

참조:CSS 박스 백그라운드 아래 색상 속성

참조:CSS border-left-color 속성

참조:CSS border-right-color 속성

참조:CSS border-top-color 속성

참조:CSS 방향 속성

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

참조:CSS 쓰러짐 모드 속성