CSS 참조가이드

CSS @규칙(RULES)

CSS 속성大全

CSS3 background-clip 속성 사용 방법 및 예제

CSS 배경-clip 속성은 요소의 배경(색상 또는 이미지)이 요소의 경계 아래로 확장되는지를 지정합니다.

다음 표는 이 속성의 사용 상황과 버전 역사를 요약합니다.

기본 값:	border-box
적용 대상:	모든 요소에 적용됩니다. 이는 다음에도 적용됩니다:::first-letter와::first-line。
상속:	아니요
애니메이션 가능:	아니요.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.backgroundClip="content-box"

background-clip 사용 문법

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

background-clip: border-box | padding-box | content-box | initial | inherit

다음 예제는 background의 사용법을 보여줍니다.-clip 속성.

예제

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: orange;
　　　　background-clip: content-box;
}

테스트를 보세요‹/›

속성 값

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

값	설명
border-box	백그라운드가 테두리의 외부 경계까지 확장됩니다. 테두리 아래에는 백그라운드가 그려집니다. 이것은 기본 값입니다.
padding-box	백그라운드가 채우기의 외부 경계까지 확장됩니다. 테두리 아래에는 백그라운드가 그려지지 않습니다.
content-box	백그라운드가 내용 상자 내에만 (剪切된) 그려집니다. 테두리와 채우기 영역 아래에는 백그라운드가 그려지지 않습니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 background를 사용합니다.-clip 속성의 계산 값.

브라우저 호환성

background-clip 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 4+ 구글 크롬4+ 인터넷 익스플로러 9+ 애플 사파리 3+ 오페라 10.5+

더 읽기

다음 강의를 참조하세요:CSS3배경，CSS3배경。

CSS 배경-color 속성 CSS 배경-attachment 속성