CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 column-span 속성 CSS3 column-rule-style 속성

CSS3 column-rule-width 속성 사용 방법 및 예제

column-rule-width CSS 속성은 다중 열 레이아웃의 열 사이에 그려지는 레일의 너비를 설정합니다。

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다。

기본 값:	medium
적용:	다중 열 요소
thừa kế:	아니요
애니메이션 가능:	네.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.columnRuleWidth="thin"

column-rule-width 사용 문법

이 속성의 문법은 다음과 같습니다:

column-rule-width:　length　|　medium　|　thin　|　thick　|　initial　|　inherit

아래 예제는 column을 사용하는 방법을 설명합니다.-rule-width 속성。

예제

p　{
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule-color:　red;
　　　　-webkit-column-rule-width:　2px;
　　　　-webkit-column-rule-style:　solid;
　　　　/*　파이어폭스　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule-color:　red;
　　　　-moz-column-rule-width:　2px;
　　　　-moz-column-rule-style:　solid;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule-color:　red;
　　　　column-rule-width:　2px;
　　　　column-rule-style:　solid;
}

테스트해보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다。

값	설명
length	절대적이거나 상대적인 단위로 표현된 길이는 레일의 너비를 지정하는 데 사용됩니다.
medium	기본 값인 중간 너비를 정의합니다.
thin	기본 값보다細한 레일을 정의합니다.
thick	기본 값보다 넓은 너비를 정의합니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 연결된 요소는 부모 요소 column을 사용합니다.-rule-width의 속성 값。

브라우저 호환성

column-rule-width 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 2+ ^-moz- 구글 크롬 4+ ^-webkit- 인터넷 익스플로러 10+ 애플 사파리 3.1+ ^-webkit- 오페라 11.1+ ^-o-，15+ ^-webkit-

추가로 읽어보세요

다음 튜토리얼을 참조하세요:CSS3다중 열 레이아웃。

CSS3 column-span 속성 CSS3 column-rule-style 속성