CSS 컬럼 룰 속성

정의 및 사용법

column-rule 속성은 모든 column-rule-* 속성을 설정하는 단축 속성입니다.

column-rule 속성은 컬럼 간의 규칙의 너비, 스타일 및 색상을 설정합니다.

추가로 참조:

CSS3 교본:CSS3 다중 열

HTML DOM 참조 가이드:columnRule 속성

예제

컬럼 간의 너비, 스타일 및 색상 규칙을 정의합니다:

div
{
column-rule:3px outset #ff00ff;
}

개인적으로 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

column-rule: column-rule-width column-rule-style column-rule-color;

속성 값

값 설명
column-rule-width 컬럼 간의 너비 규칙을 설정합니다.
column-rule-style 컬럼 간의 스타일 규칙을 설정합니다.
column-rule-color 컬럼 간의 색상 규칙을 설정합니다.

기술 세부 사항

기본값: medium none black
상속성: no
버전: CSS3
JavaScript 문법: object.columnRule="3px outset #ff00ff"

更多实例

Column-count
div 요소 내의 텍스트를 세 열로 나눕니다.
Column-gap
div 요소 내의 텍스트를 세 열로 나누고, 간격을 30 픽셀로 설정합니다.

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

column-rule:3px outset #ff00ff; -webkit- 또는 -moz-를 포함한 숫자는 프리퍼스트의 첫 번째 버전을 사용하는 것을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
50.0
4.0 -webkit-		 10.0 52.0
2.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1