box-shadow

정의 및 사용

box-shadow 속성은 해당 박스요소에 그림자를 나타낼 수 있게 값을 지정한다.

정의 및 사용
기본값 none
상속 no
버전 CSS3
자바스크립트 구문 object.style.boxShadow=”10px 10px 5px #888888″

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE 브라우저 외 모두 지원 (IE 계열은 9 부터 지원, Safari 브라우저는 -webkit- 접두사 사용)

구문

속성 값 설명
설명
h-shadow 필수값. 수평의 그림자 위치를 지정하며 음수값도 허용된다
v-shadow 필수값. 수직의 그림자 위치를 지정하며 음수값도 허용된다
blur 필수값. 그림자의 흐릿한 정도를 지정
spread 그림자의 퍼짐 정도를 지정 ( 숫자가 커질수록 상단과 왼쪽 부분에도 그림자가 나타난다. )
color 필수값. 그림자의 색상을 지정
inset 바깥으로 지정된 그림자를 안쪽으로 변경할 수 있는 값 ( 기본적으로 오른쪽과 하단에 생기던 그림자가 박스 내부 그림자로 바뀌면서 상단과 왼쪽으로 생기게 된다. )

예제

버그 및 이슈

소제목

목록 으로

댓글