CSS에서 맨 아래에만 상자 그림자 설정

이 기사에서는 CSS에서 상자의 맨 아래에만 box-shadow 세트를 소개합니다.

box-shadow 속성을 사용하여 CSS에서 하단 상자 그림자 설정

box-shadow 속성을 사용하여 상자 하단에만 그림자를 설정할 수 있습니다. box-shadow 속성은 선택한 요소의 그림자를 설정합니다.

이 속성은 몇 가지 옵션을 사용합니다. 먼저 아래에 표시된 구문을 통해 속성을 이해해 보겠습니다.

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

box-shadow 속성이 그것을 구현하기 위해 어떻게 작동하는지 이해하는 것이 중요합니다. h-offset 옵션은 요소의 수평 방향으로 그림자를 설정합니다.

양수 값은 그림자를 요소의 오른쪽 방향으로 설정하고 음수 값은 그림자를 요소의 왼쪽 방향으로 설정합니다.

마찬가지로 v-offset 옵션은 그림자를 수직으로 설정합니다. 다시 말하지만, 양수 값은 그림자를 아래쪽으로 설정하고 음수 값은 요소의 위쪽으로 설정합니다.

blur-radius 옵션은 그림자의 흐림 반경을 나타냅니다. 흐림 반경이 증가할수록 그림자가 더 흐려집니다.

spread-radius 옵션은 그림자의 크기를 요소로 설정합니다. 양수 값은 그림자의 크기를 늘리고 음수 값은 감소합니다.

color 옵션을 사용하여 그림자의 색상을 설정할 수도 있습니다. 그러나 blur-radius, spread-radius 및 color 옵션은 선택 사항입니다.

이제 box-shadow 속성이 작동하는 방식을 배웠으므로 이를 구현하여 상자에 아래쪽 그림자를 생성할 차례입니다.

이를 위해 h-offset을 0으로 설정하고 v-offset에 일부 값을 지정할 수 있습니다. 결과적으로 그림자는 상자 아래쪽에만 나타납니다.

예를 들어 특정 높이와 너비로 상자를 만듭니다. background-color 속성을 black으로 설정합니다.

다음으로 box-shadow 속성을 사용하여 다양한 옵션을 설정합니다. h-offset의 경우 0, v-offset의 경우 8px, blur-radius의 경우 2px, spread-radius의 경우 -2px, color는 gray로 설정 .

결과적으로 하단에 회색 그림자가 있는 검은색 상자가 나타납니다. 따라서 우리는 CSS에서 상자의 맨 아래에 그림자를 설정하기 위해 box-shadow 속성을 사용하는 방법을 배웠습니다.

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}