요소(박스)의 그림자 효과
- 박스에 그림자 효과를 넣고 싶을때 사용
- 문법
div { box-shadow:h-shadow v-shadow blur spread color 그림자위치}
· h-shadow : x축 그림자. 길이로 표현해준다(ex. 10px, 2em, 5%). 마이너스값 사용가능
· v-shadow : y축 그림자. 역시 길이로 표현. 마이너스값 가능
· blur : 흐린정도. 생략 가능.
· spread : 퍼지는 정도. 생략 가능
· color : 그림자색. red,#ff0000,rgb(255,255,255) 등 다양한 방법이 가능하다.
· 그림자위치 : 기본은 박스 바깥쪽 그림자. inset을 넣으면 박스 안쪽으로 그림자가 생김.
예시
div { box-shadow:5px 5px; } div { box-shadow:10px 10px 20px blue; }  div { box-shadow:10px 10px 20px 20px blue; }  div { box-shadow:10px 10px 20px blue inset; }  |
