[CSS] box-shadow

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

/* 값이 2개인 경우 */
box-shadow: 60px -16px;

/* 값이 3개인 경우 */
box-shadow: 10px 5px 5px;

/* 값이 4개인 경우  */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 값 4개 + color를 추가한 경우 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 요소가 움푹 들어간 것처럼 사용할 경우 */
box-shadow: inset 2px 2px 2px 1px rgb(0, 0, 0, 0.2);

값	설명
2개인 경우	<offset-x> <offset-y> 값으로 해석된다.
3개인 경우	<offset-x> <offset-y> <blur-radius> 값으로 해석된다.
4개인 경우	<offset-x> <offset-y> <blur-radius> <spread-radius> 값으로 해석된다.

[선택]

color와 inset는 선택적으로 사용할 수 있다. (box-shadow는 Outset가 기본 값이다.)

 

[주의]

값은 띄어쓰기로 구분하고, color값은 쉼표로 구분한다.

---

blur-radius

값이 클수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아진다.

음수 값은 사용할 수 없다.

값을 설정하지 않으면 0이 되어 테두리가 선명해진다. 

---

spread-radius

양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어든다.

기본값은 0(그림자와 요소 크기 동일)이다. 

---

inset

Outset(기본값): 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 된다.
inset:  요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려진다.

---

[공부 좌표]

box-shadow