CSS 경계 블록 끝 속성
- 이전 페이지 border-block-color
- 다음 페이지 border-block-end-color
정의 및 사용법
border-block-end 속성은 다음 속성의 축약 형식입니다:
CSS border-block-end 속성은 CSS의 border-bottom,border-left,border-right 과 border-top 속성은 매우 유사하지만, border-block-end 속성은 블록 방향에 의존합니다.
주의:관련 CSS 속성 writing-mode 블록 방향을 정의합니다. 이는 블록의 시작 및 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. border-block-end 속성의 결과. 영문 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.
예제
예제 1
블록 방향 끝에서의 테두리의 너비, 색상 및 스타일을 설정합니다:
div {
border-block-end: 10px solid pink;
}
예제 2: writing-mode 속성과 결합
블록 방향 끝에서의 테두리 위치는 writing-mode 속성의 영향:
div {
writing-mode: vertical-rl;
border-block-end: dotted blue;
}
CSS 문법
border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| border-block-end-width |
부분 요소가 블록 방향 끝에서의 테두리 너비를 지정합니다. 기본 값은 "medium"입니다. |
| border-block-end-style |
부분 요소가 블록 방향 끝에서의 테두리 스타일을 지정합니다. 기본 값은 "none"입니다. |
| border-block-end-color |
부분 요소가 블록 방향 끝에서의 테두리 색상을 지정합니다. 기본 값은 테두리의 현재 색상입니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참고: initial。 |
| inherit | 부모 요소에서 이 속성을 thừa kế합니다. 참고: inherit。 |
기술 세부 사항
| 기본 값: | medium none currentcolor |
|---|---|
| thừa kế: | 아니요 |
| 애니메이션 제작: | 지원. 참고:애니메이션 관련 속성。 |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.borderBlockEnd="pink dotted 5px" |
브라우저 지원
표의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
관련 페이지
교육:CSS 테두리
참조:CSS 경계 속성
참조:CSS 경계 블록 속성
- 이전 페이지 border-block-color
- 다음 페이지 border-block-end-color
