CSS3 기초 – box-shadow

엘리먼트에 그림자를 넣어주는 속성입니다.

<style>
	.box {
		margin: 20px;
		width: 100px;
		height: 100px;
		background: blue;
		-moz-box-shadow: 3px 3px 5px black;
		-webkit-box-shadow: 3px 3px 5px black;
		box-shadow: 3px 3px 5px black;
	}
</style>

<div class="box"></div>

속성 값은 순서대로 x-offset, y-offset, blur, color 입니다. 즉, 위와 같은 경우 x축으로 3px, y축으로 3px, blur 크기는 5px, color 는 black 으로 하라는 의미입니다. x축으로 3px, y축으로 3px 움직였기 때문에 그림자 효과가 box의 우측과 하단에 나타나고 있습니다. 만약 x,y offset 을 0으로 한다면

<style>
	.box2 {
		margin: 20px;
		width: 100px;
		height: 100px;
		background: blue;
		-moz-box-shadow: 0px 0px 5px black;
		-webkit-box-shadow: 0px 0px 5px black;
		box-shadow: 0px 0px 5px black;
	}
</style>

<div class="box2"></div>

위와 같이 그림자가 우측, 하단으로 움직이지 않기 때문에 상하좌우 동일한 blur 효과를 볼 수 있습니다.

x, y offset 값을 음수로 주면 우측, 하단으로 움직이지 않고 좌측, 상단으로 움직이게 할 수 있습니다.

<style>
	.box3 {
		margin: 20px;
		width: 100px;
		height: 100px;
		background: blue;
		-moz-box-shadow: -3px -3px 5px black;
		-webkit-box-shadow: -3px -3px 5px black;
		box-shadow: -3px -3px 5px black;
	}
</style>

<div class="box3"></div>

그리고 box-shadow 속성은 , 로 구분해서 값을 여러번 줄 수 있습니다. 그래서 아래와 같이 우측, 하단과 좌측, 상단에 한번에 box-shadow 를 줄 수 있습니다.

<style>
	.box4 {
		margin: 20px;
		width: 100px;
		height: 100px;
		background: blue;
		-moz-box-shadow: 3px 3px 5px black, -3px -3px 5px black;
		-webkit-box-shadow: 3px 3px 5px black, -3px -3px 5px black;
		box-shadow: 3px 3px 5px black, -3px -3px 5px black;
	}
</style>

<div class="box4"></div>

그리고 blur 다음에 추가로 spread 값을 줄 수 있습니다. 이 값은 shadow 의 길이를 의미합니다. spread 를 3px 로 설정해보겠습니다.

<style>
	.box5 {
		margin: 20px;
		width: 100px;
		height: 100px;
		background: blue;
		-moz-box-shadow: 3px 3px 5px 3px black;
		-webkit-box-shadow: 3px 3px 5px 3px black;
		box-shadow: 3px 3px 5px 3px black;
	}
</style>

<div class="box5"></div>

그리고 제가 color 부분에 black 이라고 했는데, 이 자리에는 CSS 에서 color 값으로 사용할 수 있는 값을 넣으면 됩니다. 즉, black, blue 같은 단어나, #000, #ebebeb 같은 값, 그리고 rgba(0, 0, 0, 0.5) 같은 값을 사용할 수 있습니다.

[관련 링크] http://www.css3.info/preview/box-shadow/