box-shadow.md

Box Shadow

Box Shadow는 요소에 그림자 효과를 줄 수 있는 CSS 속성입니다.

기본적으로 아래와 같이 사용할 수 있습니다.

.box {
  box-shadow: 10px 11px 12px 13px rgba(0, 0, 0, 0.5) inset;
}

이 속성에서 사용되는 값들은 아래와 같이 설명할 수 있습니다.

• 10px: 그림자의 수평 위치 (x축, +값은 오른쪽, -값은 왼쪽)
• 11px: 그림자의 수직 위치 (y축, +값은 아래쪽, -값은 위쪽)
• 12px: 그림자의 흐림 정도 (Blur Radius)
• 13px: 그림자의 확산 정도 (Spread Radius)
• rgba(0, 0, 0, 0.5): 그림자의 색상 (RGB 또는 RGBA 값)
• inset: 내부 그림자를 만들 때 사용하는 키워드

이 속성은 다양한 방법으로 사용할 수 있습니다. 예를 들어, 아래와 같이 그림자를 여러 개 추가할 수 있습니다.

.box {
  box-shadow: 10px 11px 12px 13px rgba(0, 0, 0, 0.5),
              -10px -11px 12px 13px rgba(0, 0, 0, 0.5);
}

또한 Syntax에 따라서 다양한 순서로 값을 지정할 수 있습니다.

.box {
  box-shadow: 10px 11px 12px 13px rgba(0, 0, 0, 0.5) inset;
}

.box {
  box-shadow: 10px 11px rgba(0, 0, 0, 0.5) 12px 13px inset;
}

.box {
  box-shadow: 10px 11px 12px rgba(0, 0, 0, 0.5) 13px inset;
}

.box {
  box-shadow: 10px 11px rgba(0, 0, 0, 0.5) 12px inset 13px;
}

...