box-shadow
box-shadow 속성은 박스 요소의 그림자를 설정합니다.
box-shadow
box-shadow 속성은 박스 요소의 그림자를 설정합니다.
정의(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 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |