[css] 박스 그림자 효과 적용하기 - box-shadow

▶ box-shadow 는 박스요소에 그림자를 넣는 속성입니다.

1. 문법

box-shadow: [dx] [dy] [blur] [spread] [color] [set]

속성값	내용
dx	(필수)그림자 가로방향 위치
dy	(필수)그림자 세로방향 위치
blur	그림자 흐림 정도
spread	그림자 번짐 정도
color	그림자 색상
set	- outset : 요소 바깥쪽으로 그림자 효과(기본값) - inset : 요소 안쪽으로 그림자 효과

 

2. 사용방법

.box-shadow {
　　box-shadow: 4px 4px 2px 2px #eee;
  }

.box-shadow {
　　-moz-box-shadow: 4px 4px 2px 2px #eee;
　　-webkit-box-shadow: 4px 4px 2px 2px #eee;
　　box-shadow: 4px 4px 2px 2px #eee;
　　}

 

3. 예제

See the Pen poewWox by mk (@kmeijing) on CodePen.