[css] box-shadow

CSS의 box-shadow 속성은 HTML 요소에 그림자 효과를 적용하는 데 사용됩니다. 이 속성은 box-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <spread-radius> <color> 형식으로 정의됩니다.

각각의 값은 다음과 같습니다.

<horizontal-offset> : 그림자가 요소의 수평 방향으로 얼마나 이동할지를 결정합니다. 음수 값은 그림자를 요소의 왼쪽에 위치시키고 양수 값은 오른쪽에 위치시킵니다.
<vertical-offset> : 그림자가 요소의 수직 방향으로 얼마나 이동할지를 결정합니다. 음수 값은 그림자를 요소의 위쪽에 위치시키고 양수 값은 아래쪽에 위치시킵니다.
<blur-radius> : 그림자의 흐림 정도를 결정합니다. 이 값이 클수록 더 흐릿하게 나타납니다.
<spread-radius> : 그림자의 크기를 결정합니다. 양수 값은 그림자를 요소 주변으로 확장시키고 음수 값은 요소 안쪽으로 축소시킵니다.
<color> : 그림자의 색상을 결정합니다.
예를 들어, 다음 코드는 box-shadow 속성을 사용하여 요소에 그림자 효과를 적용합니다.

div {
  box-shadow: 10px 10px 5px #888888;
}

이 코드는 <div> 요소에 수평 방향으로 10px, 수직 방향으로 10px, 흐림 정도를 5px, 크기를 0px, 색상을 #888888으로 설정한 그림자를 적용합니다.