CSS 박스 경계 블록 끝 색상 속성
- 이전 페이지 border-block-end
- 다음 페이지 border-block-end-style
정의와 사용법
border-block-end-color 속성을 사용하여 요소의 블록 방향 끝의 보드 색상을 설정합니다.
속성은 블록 방향에 의존합니다.속성을 사용하려면 border-block-end-color 속성을 설정하려면 border-block-end-style 속성이生效하기 위해서는 설정해야 합니다.
속성과 CSS border-block-end-color 속성은 다음과 같은 CSS 속성과border-left-widthborder-bottom-widthborder-left-width와 border-right-width 과 border-top-width border-block-end-color 매우 유사하지만
속성은 블록 방향에 의존합니다.주의: writing-mode 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. border-block-end-color 속성 결과. 영어 페이지에서는 내부 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.
예제
예제 1
블록 방향 끝의 보드 색상을 설정합니다:
div {
border-block-end-style: solid;
border-block-end-color: pink;
}
예제 2: writing-mode 속성과 결합
블록 방향 끝의 보드 색상 위치는 writing-mode 속성 영향:
div {
border-block-end-style: solid;
writing-mode: vertical-rl;
border-block-end-color: 5px;
}
CSS 문법
border-block-end-color: color|투명|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| color | 보드 색상을 지정해야 합니다. 기본적으로 요소의 현재 색상입니다. 참조:CSS 색상 값. |
| 투명 | 보드 색상을 투명하게 지정해야 합니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial. |
| inherit | 이 속성을 부모 요소에서 상속합니다. 참조: inherit. |
기술 세부 사항
| 기본값: | 요소의 현재 색상 |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원. 참조:애니메이션 관련 속성. |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.borderBlockEndColor="pink" |
브라우저 지원
표의 숫자는 이 특성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
관련 페이지
教程:CSS 경계선
참조:CSS 박스 경계 속성
- 이전 페이지 border-block-end
- 다음 페이지 border-block-end-style
