CSS - box-shadow

box-shadow

---

inset
: 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려짐

offset-x, offset-y
: 그림자의 위치를 설정
offset-x : 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시
offset-y : 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시

blur-radius
: 깂이 클수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐

spread-radius
: 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듬

color
: 색상 결정

 

Basic

 

box-shadow: 5px 3px black;

 

+ blur-radius

 

box-shadow: 3px 3px 5px black;

 

+ spread-radius

 

box-shadow: 0 0 5px 5px black;

 

multiple box shadows

 

box-shadow:

0 0 20px black,

20px 15px 30px yellow,

-20px 15px 30px lime,

-20px -15px 30px blue,

20px -15px 30px red;

 

inset 

 

box-shadow: inset 2px 2px 5px black;

 

더 많은 예시 >

box-shadow test