CSS로 단면 그림자를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS로 단면 그림자를 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-01 21:25:13

원래의

490명이 탐색했습니다.

How to Create a One-Sided Drop Shadow with CSS?

단면 그림자 만들기

요소의 한쪽에만 나타나는 그림자를 만들려면 CSS 속성과 의사 요소를 활용할 수 있습니다. 자세한 해결책은 다음과 같습니다.

:after 의사 요소 사용

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

로그인 후 복사

이 코드에서는 위치를 지정하는 상자 클래스를 사용하여 상위 요소를 만듭니다. 요소. 그런 다음 위치, 크기 및 상자 그림자 속성을 지정하여 그림자를 만들기 위해 ::after 의사 요소의 스타일을 지정합니다. Z-색인은 -1로 설정되어 주요 요소 뒤에 그림자를 배치합니다.

그라디언트 흐림 추가

그림자의 모양을 향상하려면 상자 그림자에 그라데이션 흐림:

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

로그인 후 복사

이 추가 코드는 그림자에 그라데이션 흐림을 추가하여 더욱 미묘하고 사실적인 효과를 만듭니다. 효과.

위 내용은 CSS로 단면 그림자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!