CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성大全

CSS3 box-shadow attribute usage and examples

box-The shadow CSS attribute applies one or more shadow effects to the box of an element.

The table below provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts.

Default value:	none
Applicable to:	All elements. It also applies to::first-letter。
inherit:	none
animatable:	is.view animation properties。
version:	CSS3new feature
JavaScript syntax:	object.style.boxShadow="8px 8px 6px #000000"

box-shadow usage syntax

The syntax of this attribute is as follows:

box-shadow: [, , ... shadowN] | none | initial | inherit
　　　　　　　where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

下面的示例演示了如何使用box-shadow 속성。

예제

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　2px　2px　4px　2px　#999;
}

테스트해 보세요‹/›

you can use the inset keyword to apply a shadow inside the element box. The inset shadow is drawn inside the border, above the background, but below the content.

예제

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}

테스트해 보세요‹/›

속성 값

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

값	설명
필수 -이 속성을 유효하게 만들기 위해 다음 값을 지정해야 합니다.
offset-x	첫 번째 길이 값은 그림자의 수평 거리를 지정합니다. 양수는 그림자를 테두리 오른쪽으로 이동시키고, 음수는 그림자를 테두리 왼쪽으로 이동시킵니다.
offset-y	두 번째 길이 값은 그림자의 수직 거리를 지정합니다. 양수는 그림자를 아래로 이동시키고, 음수는 요소 위의 그림자를 이동시킵니다.
선택 사항 -아래 값은 선택 사항입니다.
blur-radius	세 번째 길이 값은 흐림 거리입니다. 이 값이 클수록 흐림이 커지고 그림자가 커지고 밝아집니다. 기본 값은 0으로, 그림자가 뚜렷합니다. 음수는 허용되지 않습니다.
spread-radius	네 번째 길이는 확장 거리입니다. 양수는 그림자 모양을 모든 방향으로 지정된 반지름만큼 확장시킵니다. 음수는 그림자 모양을 축소시킵니다.
color	색상은 그림자의 색상입니다. 이 값은 모든 지원되는 값 중 하나일 수 있습니다.색상 값。지정되지 않으면 일반적으로color속성 값。
inset	존재하면, 프로젝션 그림자를 외부 그림자에서 내부 그림자로 변경합니다. 내부 그림자는 테두리 내에 그려지며 배경 위에 있지만 요소 내용 아래에 있습니다.
none	그림자를 표시하지 않습니다. 기본 값입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 부모 요소의 box와 연결된 요소가 사용됩니다.-그림자의 속성 값。

브라우저 호환성

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

	파이어폭스 3.5+ ^-moz-，4 + 구글 크롬 4+ ^-웹킷-，10+ 인터넷 익스플로러 9+ 애플 사파리 3.1+ ^-웹킷-，5.1 + 오페라 10.5+

추가로 읽어보세요

다음 강의를 참조하세요:CSS3그림자，CSS 페르소나。