box-shadow 속성

box-shadow 속성은 블록에 그림자를 설정합니다. 속성 값은 공백으로 구분된 6개의 매개변수를 취하거나, 그림자를 완전히 제거하는 키워드 none를 취합니다.

문법

선택자 {
	box-shadow: inset x_축_이동 y_축_이동 흐림_정도 그림자_크기 색상;
}

선택자 {
	box-shadow: none;
}

매개변수	설명
`inset`	선택적 매개변수. 지정하면 그림자가 컨테이너 내부에 생기고, 지정하지 않으면 외부에 생깁니다.
x축 이동	X축을 따라 그림자 위치를 설정합니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.
y축 이동	Y축을 따라 그림자 위치를 설정합니다. 양수 값은 아래쪽으로, 음수 값은 위쪽으로 이동시킵니다.
흐림 정도	그림자의 흐림 정도를 설정합니다. 값이 클수록 그림자가 더 흐려집니다. 선택적 매개변수. 지정하지 않으면 그림자가 선명합니다.
그림자 크기	그림자의 크기를 설정합니다. 양수 값은 그림자를 확장하고, 음수 값은 반대로 축소합니다. 선택적 매개변수. 지정하지 않으면 그림자는 요소와 같은 크기가 됩니다.
색상	색상 단위로 그림자의 색상을 설정합니다. 선택적 매개변수. 지정하지 않으면 그림자 색상은 텍스트 색상과 같아집니다.

축별 이동, 흐림 정도, 그림자 크기는 퍼센트를 제외한 크기 단위로 설정합니다.

이 예제에서는 그림자가 아래쪽과 오른쪽으로 이동했고 약간의 흐림 효과가 추가되었습니다:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

이 예제에서는 그림자가 아래쪽과 오른쪽으로 이동했지만 흐림 효과는 없습니다(그림자가 선명합니다):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

이 예제에서는 그림자가 이동하지 않았지만 흐림 효과가 추가되었습니다:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

이 예제에서는 그림자가 이동하지 않았고 흐림 정도는 0이지만, 크기가 추가되었습니다(검정색은 테두리, 빨간색은 그림자입니다):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

이 예제에서는 그림자가 이동하지 않았지만 흐림 효과와 크기가 추가되었습니다(검정색은 테두리, 빨간색은 그림자입니다):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

이 예제에서는 그림자가 컨테이너 내부에 위치합니다:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}