테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS3 열 규칙

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 1042

CSS3 열 규칙


이 column-rule-style속성은 열 사이의 규칙 스타일을 지정합니다.


예

div {

    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

    -moz-column-rule-style: solid; /* Firefox */

    column-rule-style: solid;

}



29b5537665e5f097b04e4f58349f6a2c_1505796904_5523.JPG
 



<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */

    -moz-column-gap: 40px; /* Firefox */

    column-gap: 40px;

    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

    -moz-column-rule-style: solid; /* Firefox */

    column-rule-style: solid;

}

</style>

</head>

<body>


<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p>


<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>


</body>

</html>



이 column-rule-width속성은 열 사이의 규칙의 너비를 지정합니다.

예
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}


이 column-rule-color속성은 열 사이의 규칙 색상을 지정합니다.

예
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}


이 column-rule속성은 위의 모든 column-rule- * 속성을 설정하기위한 속기 속성입니다.

다음 예제에서는 열 사이의 규칙의 너비, 스타일 및 색상을 설정합니다.

예
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3229
CSS 버튼 너비
3228
CSS 비활성화 된 버튼
3227
CSS 그림자 단추
3226
CSS 호버 블 버튼
3225
CSS 컬러 단추 테두리
3224
CSS 둥근 버튼
3223
CSS CSS 단추 크기
3222
CSS CSS 버튼 색상
3221
CSS CSS 버튼
3220
CSS 이미지 모달 (고급)
3219
CSS 이미지 필터
3218
CSS 이미지 텍스트
3217
CSS 투명한 이미지
3216
CSS 폴라로이드 이미지 / 카드
3215
CSS 이미지 센터하기
3214
CSS 반응 형 이미지
3213
CSS css 미리보기 이미지
3212
CSS CSS 이미지
3211
CSS 애니메이션 속기 속성
3210
CSS 애니메이션의 속도 곡선 지정
3209
CSS 애니메이션을 반대 방향 또는 대체 주기로 실행하십시오.
3208
CSS 애니메이션을 몇 번 실행해야하는지 설정
3207
CSS 애니메이션 지연
3206
CSS CSS3 애니메이션이란 무엇입니까?
3205
CSS CSS3 전환 + 변환
3204
CSS CSS3 전환 효과 지연
3203
CSS CSS3 전환 속도 곡선 지정
3202
CSS CSS3 Transitions
3201
CSS CSS3 3D 변환
3200
CSS The matrix() Method
이전 다음
전체 목록