CSS border-inline-width 속성
- 이전 페이지 border-inline-style
- 다음 페이지 border-left
정의와 사용법
행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성이 요소의 행 내 방향 경계 높이를 설정합니다
매우 유사하지만이 속성을 설정하여 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성이 효과를 발휘하려면 설정해야 합니다 border-inline-style
。
행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성의 값은 다양한 방식으로 설정할 수 있습니다:
만약 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성에 두 가지 값이 있습니다:
border-inline-width: 10px 50px;
- 행 내 시작 부분의 경계 높이는 10px입니다
- 행 내 끝 부분의 경계 높이는 50px입니다
만약 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성에 하나의 값이 있습니다:
#example1 {
- 행 내 시작과 끝 부분의 경계 높이는 모두 10px입니다
CSS 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
속성과 CSS 속성 border-bottom-width
와 관련된 CSS 속성border-left-width
와 관련된 CSS 속성border-right-width
text-orientation border-top-width
border-right-width 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
border-top-width
매우 유사하지만주의: 예제 2: writing-mode 속성과 결합
와 관련된 CSS 속성、
text-orientation 행 내 방향에서 시작과 끝의 테두리 위치는
와 행 내 방향을 정의합니다. 이는 한 줄의 시작과 끝 위치, 그리고
border-inline-width
속성 결과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로부터입니다.
인스턴스
예제 1
행 내 방향의 테두리 너비를 설정합니다: writing-mode #example1 { border-inline-width: 5px 15px; border-inline-width: 10px; #example2 { border-inline-style: dashed; border-inline-width: 5px 15px;
border-inline-width: thin thick;
예제 3: direction 속성과 결합 예제 2: writing-mode 속성과 결합
direction
속성 영향: writing-mode border-inline-style: solid; writing-mode: vertical-rl; border-inline-width: 5px 15px;
border-inline-width: 5px;
예제 3: direction 속성과 결합 행 내 방향에서 시작과 끝의 테두리 위치는
direction
속성 영향: div { direction: rtl; border-inline-width: 5px 15px;
직접 시도해 보세요
CSS 문법길이border-inline-width: medium|thin|thick|
|initial|inherit;
속성 값 | 값 |
---|---|
중간 | 설명 |
중간 테두리를 지정합니다. 기본 값. | 얇은 테두리를 지정합니다. |
두껍습니다 | 두껍고 얇은 테두리를 지정합니다. |
길이 | 하위 문서에서는 테두리 두께를 정의할 수 있습니다. 참고:CSS 단위。 |
initial | 이 속성을 기본 값으로 설정합니다. 참고: initial。 |
inherit | 부모 요소에서 이 속성을 상속받습니다. 참고: inherit。 |
기술 세부 사항
기본 값: | 중간 |
---|---|
상속성: | 아니요 |
애니메이션 제작: | 지원. 참고:애니메이션 관련 속성。 |
버전: | CSS3 |
JavaScript 문법: | object.style.borderInlineWidth="3px 10px" |
브라우저 지원
표格에 나타난 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
---|---|---|---|---|
87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
관련 페이지
강의:CSS 경계선
참조:CSS 경계 속성
참조:CSS 경계 내 속성
참조:CSS 방향 속성
- 이전 페이지 border-inline-style
- 다음 페이지 border-left