[css] box-shadow

 

box-shadow: h-shadow, v-shadow, blur, spread, color | inset | initial | inherit ;

• h-shadow 가로방향의 그림자 위치(position). 음수는 좌측, 양수는 우측방향.
• v-shadow 세로방향의 그림자 위치(position). 음수는 위쪽, 양수는 아랫쪽.
• blur (optional) 흐릿한 효과(blur)의 길이.
• spread (optional) 그림자를 확장하는 크기(size). 이 값이 클수록 원본 그림자보다 설정값만큼 그림자가 커지며, 음수도 사용가능.
• color 그림자의 색상.
• inset (optional) 이 속성을 설정하면, 그림자가 테두리의 안쪽으로 생성됨.
• initial 현재 설정을 전체 HTML문서 내의 box-shadow속성의 기본값으로 설정.
• inherit 현재 속성을 부모 객체로부터 상속.

 

---

 

box-shadow를 쉽게 보면서 만들 수 있는 사이트

https://www.cssmatic.com/box-shadow

Box Shadow CSS Generator | CSSmatic

이 사이트에서는 box-shadow뿐 아니라 

Gradient Generator/Border Radius/Noise Texture도 가능하다.