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

CSS3 background-clip 속성

· 8년 전 · 1986

CSS3 background-clip 속성


CSS3 background-clip속성은 배경의 그림 영역을 지정합니다.


이 속성에는 세 가지 값이 사용됩니다.


1. border-box - (기본값) 배경이 테두리의 바깥 가장자리에 칠해집니다.

2. padding-box - 배경이 채우기 바깥 쪽 가장자리에 칠해집니다.

3. content-box - 배경이 내용 상자 안에 그려진다.


다음 예제에서는이 background-clip속성을 보여줍니다 .


#example1 {

    border: 10px dotted black;

    padding: 35px;

    background: yellow;

    background-clip: content-box;

}


전체소스

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

}


#example2 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: padding-box;

}


#example3 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: content-box;

}

</style>

</head>

<body>


<p>No background-clip (border-box is default):</p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


<p>background-clip: padding-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


<p>background-clip: content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


</body>

</html>



 

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3087
3086
3085
3084
3083
3082
3081
3080
3079
3078
3077
3076
3075
3074
3073
3072
3071
3070
3069
3068
3067
3065
3064
3063
3062
3061
3060
3059
3058
3057