CSS 참조가이드

CSS @규칙(RULES)

CSS 속성大全

CSS3 column-rule-color 속성 CSS3 column-gap 속성

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

olumn-rule CSS 속성은 각 칼럼 사이에 그려질 선을 지정합니다. 즉, "규칙"입니다. 이는 단일 속성을 설정하는 간단한 속성입니다. 즉, 동시에 설정column-rule-width，column-rule-style와column-rule-color。

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

기본 값:	모든 속성 확인
적용 대상:	다중 열 요소
thừa kế:	없음
애니메이션 가능:	네, 빠른 기록의 일부 속성은 애니메이션을 설정할 수 있습니다.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.columnRule="3px outset #ff00ff"

column-rule 사용 문법

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

column-rule: [ column-rule-width column-rule-style column-rule-color [ | initial | inherit

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

예제

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

테스트를 보세요‹/›

속성 값

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

값	설명
column-rule-width	칼럼 사이의 규칙 너비를 설정합니다. 기본 값은 medium입니다. 음수 값을 사용할 수 없습니다.
column-rule-style	칼럼 사이의 규칙 스타일을 설정합니다. 기본 값은 없음
column-rule-color	칼럼 사이의 규칙 색상을 설정합니다. 기본 값은color의 요소.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소 column의 속성을 사용합니다.-rule 속성 값.

브라우저 호환성

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

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

추가적인 읽기

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

CSS3 column-rule-color 속성 CSS3 column-gap 속성