css3를 사용하여 box-shadow 그림자 구현하는 방법

사용법

box-shadow: h-shadow v-shadow distance color

---------------------------------------------------------------------

Value Description

---------------------------------------------------------------------

h-shadow 필수값. 그림자 시작 위치 (가로방향). 음수값 허용

v-shadow 필수값. 그림자 시작 위치 (세로방향). 음수값 허용

distance 그림자와의 거리 (멀어질수록 뿌옇게 보인다)

color 색상

---------------------------------------------------------------------

사용예

box-shadow:3px 2px 3px #888;

JavaScript로 구현하는 방법

object.style.boxShadow=“3px 2px 3px #888 "

Prefix

-moz-box-shadow

-webkit-box-shadow

Prefix 는 표준제정 이후에도 유효합니다.

다음 코드를 실행해 봅시다.

<!DOCTYPE HTML>

<html>

<head>

<title>box-shadow</title>

</head>

<body>

</body>

</html>

이렇게 예쁜 그림자가 생기는 것을 확인할 수 있습니다.

그림자처럼 보이게 하려면 회색계열의 색을 쓰면 효과적입니다.

웹마케팅 창고