CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

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

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

column-rule-color 속성은 다중 열 레이아웃에서 열 사이에 그려지는 모든 규칙의 색상을 설정합니다。

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

기본 값:	현재color요소 값
적용:	다중 열 요소
thừa kế:	없음
애니메이션 가능:	는입니다。참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.columnRuleColor="#ff00ff"

열 규칙 색상의 사용 문법

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

column-rule-color:　color　|　initial　|　inherit

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

예제

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;
}

테스트해 보기‹/›

속성 값

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

값	설명
color	열 규칙 색상을 지정합니다. 모든 유효한CSS 색상 값。
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 부모 요소의 column에 대한 요소가 사용됩니다.-rule-color의 속성 값。

브라우저 호환성

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

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

추가로 읽어보기

다음 튜토리얼을 참조하십시오:CSS3다중 열 레이아웃。

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