CSS box shadow

box-shadow css 속성은 요소의 프레임 주위에 그림자 효과를 추가한다. 여러개의 효과를 쉼표로 추가하여 설정할 수 있다. X값, Y값, 블러, 번지는 정도, 색상 을 기재한다. 거의 모든 요소의 프레임에서 사용할 수 있으며, border-radius를 지정할 수 있다. 여러 개를 지정할 수 있고, 첫번째로 지정한 그림자가 제일 위에 있다.

box-shadow: 3px 3px red, -1em 0 .4em teal;

문법

다음과 같이 지정할 수 있다.

• 2 / 3 / 4개의 <length> 값
  • 값이 두개만 주어진 경우: <offset-x>, <offset-y>
  • 세번째 값: <blur-radius>
  • 네번째 값: <spread-radius>
• inset: 옵션갑
• color: 옵션값

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

값

inset

지정하지 않은 경우(기본값) 그림자는 드롭섀도우로 간주된다. inset 키워드는 프레임 내부로 그림자 방향을 변경한다.

offset-x, offset-y

그림자 오프셋을 설정하기 위한 <length> 값이다. <offset-x>은 수평 거리를 명시한다. 음의 값은 그림자를 요소의 왼쪽에 위치시킨다. <offset-y>는 수직 거리를 명시한다. 음의 값은 그림자를 요소의 위에 위치시킨다. 두 값이 모두 0인 경우, 그림자는 요소의 뒤에 배치된다.

blur-radius

세번째 값. 값이 클수록 흐릿해지고, 그림자가 더 커지고 가벼워진다. 음수값은 허용되지 않으며, 지정하지 않으면 0이 된다.

spread-radius

네번째 값. 양수 값은 그림자를 확장시키고 더 크게 늘린다. 음수 값은 수축시킨다. 지정하지 않으면 0이 된다.

color

지정되지 않은 경우, 사용되는 색상은 브라우저에 따라 달라진다. 일반적으로 색 속성 값이지만 사파리는 현재 투명한 그림자를 적용한다.

보간

목록의 각 그림자는 color와 x, y, blur 및 spread를 통해 보간된다. 각 그림자에 대해 여러 그림자가 모두 기재되어 있거나 기재되어 있지 않은 경우 보간된 그림자는 그 점에서 기재된 그림자와 일치되어야 한다.

---

REFERENCE
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow