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

단면 그림자 만들기

요소의 한 면에만 영향을 미치는 그림자를 얻는 것은 웹에서 일반적인 요구 사항일 수 있습니다. 설계. 예를 들어, 그림자가 인접 요소와 겹치지 않고 요소 아래에 떨어지기를 원하는 시나리오가 발생할 수 있습니다.

이 효과를 얻는 한 가지 방법은 box-shadow 속성을 사용하여 크기를 지정할 수 있는 것입니다. , 확산 및 요소 주위의 그림자 색상. 그러나 box-shadow의 기본 동작은 요소의 모든 면에 그림자를 만드는 것입니다.

하단 전용 그림자 만들기

방울을 만들려면 요소 아래에만 표시되는 그림자의 경우 의사 요소를 만들어 상위 요소의 아래쪽에 배치할 수 있습니다. 그런 다음 이 의사 요소는 그림자 효과를 받게 됩니다.

다음은 최신 CSS 구문을 사용하여 원래 질문에서 업데이트된 예입니다.

#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;
}

이 코드는 아래쪽으로만 확장되는 그림자를 생성합니다. #box 요소의 하단에 배치하여 하단에만 그림자가 있는 듯한 느낌을 효과적으로 줍니다. 의사 요소는 기본 요소 뒤에 표시되도록 z-인덱스가 -1인 맨 아래에 배치됩니다.

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