기본적인 모양
box-shadow: 2px 2px 5px #000;
문법
box-shadow: h-shadow v-shadow {blur {spread}} {color} {inset};
- h-shadow : 수평 그림자 위치 (필수) (음수일 경우 위로)
- v-shadow : 수직 그림자 위치 (필수) (음수일 경우 왼쪽으로)
- blur : blur(흐리게)효과수준 (옵션)
- spread : 그림자 크기 (옵션)
- color : 그림자 색 (옵션)
- inset; 내부 그림자 형식 (옵션)(inset 이라고 적음)
- 특징
- h-shadow, v-shadow 로 상하, 좌우 로 설정 가능
- blur 및 spread (그림자 크기) 설정가능
- spread (그림자 크기) 설정시
- 위치도 주의해서 설정
- blur를 무조건 같이 표시해야한다.(0px라도)
- 레이아웃으로의 위치를 차지하지 않는다.
- 단순한 꾸밈으로 동작하며 box-shadow로 인한 레이아웃 뒤틀림이 없음.
- 브라우저 지원
- IE9+
- Firefox
- Chrome
- Opera
- Safari 5.1.1 (윈도우 최후 버전은 5.1.7 이므로 지원은 됨)
