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 현재 속성을 부모 객체로부터 상속 합니다.

출처: https://mini-sugar.tistory.com/54 [작은설탕의 달콤한 인생로그]

 

---

 

좋다, 그런데 이걸 외운다는 것은 개발자가 아니라 디자이너가 되겠다는 소리다. (쓰다보니 외워지는 경우는 있겠다만)

그래서 편리하게 box-shadow를 만들어주는 사이트를 이용하는 것이 현명하다.

 

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

Box Shadow CSS Generator | CSSmatic