CSS 밴더 블록 시작 스타일 속성

정의와 사용법

블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. 요소가 블록 방향의 시작 부분에 대한 경계 스타일을 설정하는 속성입니다.

CSS 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. 속성과 CSS 속성 border-bottom-styleborder-left-style 와 border-right-style 과 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. border-top-style

매우 유사하지만속성은 블록 방향에 따라 달라집니다. 블록 방향 시작 부분의 경계 스타일 위치는 주의: 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. border-block-start-style

속성 결과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

예제

예제 1

속성 영향:
  writing-mode: vertical-rl;

border-block-start-style: dotted;

블록 방향 시작 부분의 경계 스타일을 설정하려면:

예제 2: writing-mode 속성과 결합 블록 방향 시작 부분의 경계 스타일 위치는 writing-mode

속성 영향:
  div {
  writing-mode: vertical-rl;

border-block-start-style: dotted;

}

직접 테스트해 보세요

CSS 문법

border-block-start-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; 속성 값
none 값
설명 기본 값. 경계선이 없음을 지정합니다.
hidden none과 동일하지만 테이블 요소의 경계 충돌 해결에서는 다릅니다.
dashed 점선 경계선을 지정합니다.
solid 단일선 경계선을 지정합니다.
double 양선 경계선을 지정합니다.
groove

3D 주름 경계선을 지정합니다.

효과는 border-color의 값에 따릅니다.
ridge

3D 높이 경계선을 지정합니다.

효과는 border-color의 값에 따릅니다.
inset

3D 내부 경계선을 지정합니다.

효과는 border-color의 값에 따릅니다.
outset

3D 외부 표면 경계선을 지정합니다.

효과는 border-color의 값에 따릅니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: none
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.borderBlockStartStyle="dotted"

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

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

관련 페이지

教程:CSS 경계선

참조:CSS 밴더 속성

참조:CSS 밴더 블록 속성

참조:CSS 밴더 블록 스타일 속성

참조:CSS 밴더 블록 끝 스타일 속성

참조:CSS 밴더 아래 스타일 속성

참조:CSS border-left-style 속성

참조:CSS border-right-style 속성

참조:CSS border-top-style 속성

참조:CSS 쓰기-모드 속성