CSS border-inline-start-width 속성

정의와 사용법

border-inline-start-width 속성 설정 요소가 행 내 방향 시작점의 테두리 너비를 설정합니다.

주의:이를 위해 border-inline-start-width 속성이生效되면, 설정이 필요합니다 border-inline-start-style 속성과

CSS의 border-inline-start-width 속성은 border-bottom-widthborder-left-widthborder-right-widthborder-top-width 속성은 매우 유사하지만 border-inline-start-width 속성은 내부 방향에 의존합니다。

주의:와 관련된 CSS 속성 writing-modetext-orientationdirection 내부 방향을 정의합니다. 이는 행의 시작과 끝 위치 및 border-inline-start-width 속성 결과. 영어 페이지에서는 내부 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다。

예제

예제 1

내부 방향 시작의 경계 너비를 설정하십시오:

div {
  border-inline-start-style: solid;
  border-inline-start-width: 10px;
}

직접 시도해 보세요

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

내부 방향 시작의 경계 위치는 writing-mode 속성 영향:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-width: 5px;
}

직접 시도해 보세요

예제 3: direction 속성과 결합

내부 방향 시작과 끝의 경계 위치는 direction 속성 영향:

div {
  direction: rtl;
  border-inline-start-width: 10px;
}

직접 시도해 보세요

CSS 문법

border-inline-start-width: 중간|细细한|두꺼운|길이|initial|inherit;

속성 값

설명
중간 중간 경계를 지정합니다. 기본값。
细细한 细细한 경계를 지정합니다。
두꺼운 두꺼운 경계를 지정합니다。
길이 극도로 정의할 수 있는 경계의 두께를 허용합니다. 참조:CSS 단위
initial 이 속성을 기본값으로 설정합니다. 참조: initial
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit

기술 세부 사항

기본값: 중간
상속성: 아니요
애니메이션 제작: 지원。참조:애니메이션 관련 속성
버전: CSS3
JavaScript 문법: object.style.borderInlineStartWidth="10px"

浏览器支持

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

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

관련 페이지

教程:CSS 경계선

참조:CSS 경계 속성

참조:CSS 경계 인라인 속성

참조:CSS 경계 인라인 끝 너비 속성

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

참조:CSS 경계 아래 너비 속성

참조:CSS border-left-width 속성

참조:CSS border-right-width 속성

참조:CSS border-top-width 속성

참조:CSS 방향 속성

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

참조:CSS 쓰기 모드 속성