CSS에서 단면 그림자 효과를 어떻게 만들 수 있나요?

요소의 한 면에 그림자 놓기

요소에 그림자 효과를 만드는 것은 일반적으로 요소에 그림자를 적용할 수 있는 box-shadow 속성을 사용하여 수행됩니다. 요소의 모든 면. 그러나 특정 시나리오에서는 그림자가 인접한 다른 요소와 겹치지 않고 바닥과 같은 한쪽 면에만 나타나는 것이 바람직할 수 있습니다.

이를 달성하기 위한 한 가지 접근 방식은 의사- :after와 같은 요소를 사용하면 기본 요소 아래에 추가 레이어를 만들 수 있습니다. 그런 다음 이 레이어를 별도로 배치하고 스타일을 지정하여 원하는 그림자 효과를 나타낼 수 있습니다.

다음 코드를 고려하세요.

#box {
  background-color: #3D6AA2;
  width: 160px;
  height: 90px;
  position: absolute;
  top: calc(10% - 10px);
  left: calc(50% - 80px);
}

.box-shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0px 0px 8px 2px #000000;
}

이 예에서는 ID 상자를 사용하여 컨테이너 요소를 만들고 CSS 클래스 .box-shadow를 추가하세요. :after 의사 요소는 .box-shadow 내에 추가되고 특정 크기, 위치 및 그림자 속성으로 스타일이 지정됩니다.

:after 의사 요소에서 하단: 1px 및 변환: 스케일(.9)을 설정하여 요소를 사용하여 기본 요소 아래에 나타나는 좁고 약간 기울어진 모양을 만듭니다. 그런 다음 box-shadow 속성은 이 모양에 그림자 효과를 추가하여 기본 요소의 아래쪽에만 그림자가 나타나게 합니다.

이 기술을 사용하면 영향을 주지 않고 그림자를 정확하게 배치하고 사용자 정의할 수 있습니다. 다양한 레이아웃 요구 사항에 맞는 다양한 솔루션을 제공합니다.

위 내용은 CSS에서 단면 그림자 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!