box-shadow 속성은 요소에 그림자 효과를 추가하는 데 사용됩니다. 이 속성은 그림자의 위치, 색상, 흐림 정도 및 확산 정도를 지정할 수 있습니다.

사용법

box-shadow 속성은 다음과 같은 형식으로 사용됩니다:

selector {
  box-shadow: h-offset v-offset blur spread color inset;
}

• h-offset: 그림자의 수평 거리를 지정합니다. 음수 값은 그림자를 요소의 왼쪽에 위치시킵니다.
• v-offset: 그림자의 수직 거리를 지정합니다. 음수 값은 그림자를 요소의 위쪽에 위치시킵니다.
• blur: 그림자의 흐림 정도를 지정합니다. 값이 클수록 더 흐린 효과를 얻을 수 있습니다.
• spread: 그림자의 확산 정도를 지정합니다. 양수 값은 그림자를 요소의 주변으로 확산시키고, 음수 값은 그림자를 내부로 확산시킵니다.
• color: 그림자의 색상을 지정합니다.
• inset (선택사항): 이 키워드를 사용하면 요소 안쪽에 그림자 효과를 생성할 수 있습니다.

예제

다음은 box-shadow 속성의 간단한 예제입니다.

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

이 예제는 .box 선택자에 5px 오른쪽, 5px 아래로 그림자를 생성하고, 흐림 정도는 10px이며 색상은 약간 투명한 검은색으로 지정했습니다.

브라우저 호환성

box-shadow 속성은 대부분의 최신 브라우저에서 지원되며, IE 9 이상부터 사용 가능합니다. 자세한 호환성 정보는 Can I use를 참고하세요.

box-shadow 속성을 사용하면 요소에 그림자 효과를 손쉽게 추가할 수 있으므로, 웹 디자인에서 매우 유용하게 활용될 수 있습니다.