CSS border-inline-style 속성
- 이전 페이지 border-inline-start-width
- 다음 페이지 border-inline-width
과목 추천:
border-inline-style 정의와 사용법
border-inline-style 속성은 요소가 행 방향에서 경계 스타일을 설정합니다.
행 끝의 경계 스타일이 점선(dotted)이면 border-inline-style 속성의 값은 다양한 방식으로 설정할 수 있습니다:
div {
- 속성은 두 가지 값을 가집니다:
- 행 시작의 경계 스타일이 실선(solid)이면
행 끝의 경계 스타일이 점선(dotted)이면 border-inline-style 만약
writing-mode
- 속성은 하나의 값을 가집니다:
행 시작과 끝의 경계 스타일이 모두 점선(dotted)입니다. border-inline-style 속성은 CSS의 border-bottom-style、border-left-style、border-right-style 그리고 border-top-style 속성은 매우 유사하지만 border-inline-style 속성은 행 방향에 의존합니다.
주의:와 관련된 CSS 속성 border-inline-style: dashed dotted;、text-orientation 그리고 예제 3: direction 속성과 결합 행 방향을 정의합니다. 이는 행의 시작과 끝 위치, 그리고 border-inline-style 속성의 결과입니다. 영어 페이지에서는 행 방향이 왼쪽에서 오른쪽으로, 블록 방향은 아래로 이동합니다.
实例
例子 1
인스턴스
예제 1
inline 방향 테두리 스타일을 설정합니다：
direction: rtl;
#example1 {
border-inline-style: solid;
direction: rtl;
border-inline-style: solid dotted;
#example2 {
border-inline-style: dotted; border-inline-style: dashed dotted; inline 방향 시작과 끝의 테두리 위치는
direction 예제 2: writing-mode 속성과 결합 writing-mode direction: rtl;
border-inline-style: solid dotted;
writing-mode: vertical-rl;
border-inline-style: dotted; 예제 3: direction 속성과 결합 inline 방향 시작과 끝의 테두리 위치는
direction
속성 영향:
div {
direction: rtl;
}
본인이 직접 시도해 보세요
CSS 문법
| border-inline-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.borderInlineStyle="dotted" |
浏览器支持
표中的数字表示首个完全支持该属性的浏览器版本。
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
관련 페이지
教程：CSS 테두리
참조：CSS 밴더 속성
참조：CSS 방향 속성
- 이전 페이지 border-inline-start-width
- 다음 페이지 border-inline-width
