[CSS] box-shadow

box-shadow

box-shadow 속성은 박스 요소의 그림자를 설정합니다.

---

box-shadow

box-shadow 속성은 박스 요소의 그림자를 설정합니다.

특징	설명
기본 값	box-shadow : none
적용	-
버전	CSS3

정의(Definition)

• box-shadow 속성은 박스 요소의 그림자를 설정합니다.

문법(Syntax)

box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset

/* h-shadow | v-shadow | color를 설정한 경우 */
box-shadow: 10px 20px #ccc;

/* h-shadow | v-shadow | blur | color를 설정한 경우 */
box-shadow: 10px 20px 10px #ccc;

/* h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* inset | h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: inset 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* 두 가지 속성을 설정한 경우 */
box-shadow: 10px 20px #ccc, 10px 10px red;

속성(Property)

속성값	설명
none	박스 그림자를 적용하지 않습니다.
h-shadow	그림자의 수직(X축) 거리를 나타냅니다.
v-shadow	그림자의 수직(Y축) 거리를 나타냅니다.
blur	그림자의 흐림정도를 나타냅니다.
spread	그림자의 거리를 나타냅니다.
color	그림자의 색을 나태냅니다.
inset	그림자를 내부에 적용할 수 있습니다.
inherit	그림자의 속성 값을 상위요소한테 상속받습니다.

호환성(Compatibility)

						6	7	8	9	10	11
box-shadow	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능

---