CSS 박스 경계 블록 시작 색상 속성

정의와 사용법

border-block-start-color 속성을 설정하여 요소의 블록 방향 시작 위치의 경계 색상을 정의합니다.

주의:적용하려면 border-block-start-color 속성이 적용되기 위해서는 border-block-start-style 속성과

CSS border-block-start-color 속성은 CSS 속성 border-bottom-colorborder-left-colorborder-right-colorborder-top-color 매우 유사하지만 border-block-start-color 속성은 블록 방향에 따라 달라집니다.

주의:관련 CSS 속성 writing-mode 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치, 그리고 관련 CSS 속성에 영향을 미칩니다. border-block-start-color 속성의 결과. 영어 페이지에서는 인라인 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

예제

예제 1

블록 방향 시작 위치의 경계 색상을 설정합니다:

div {
  border-block-start-style: solid;
  border-block-start-color: pink;
}

직접 시도해 보세요

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

블록 방향 시작 위치는 다음과 같이 영향을 받습니다: writing-mode 속성의 영향:

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

직접 시도해 보세요

CSS 문법

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

속성 값

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

기술 세부 사항

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

浏览器支持

표中的数字表示首个完全支持该属性的浏览器版本。

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

관련 페이지

教程:CSS 경계선

참조:CSS 박스 경계 속성

참조:CSS 박스 경계 블록 속성

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

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

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

참조:CSS 박스 하단 경계 색상 속성

참조:CSS border-left-color 속성

참조:CSS border-right-color 속성

참조:CSS border-top-color 속성

참조:CSS 워팅모드 속성