정사각형이 아닌 PNG 이미지에 대한 CSS 그림자를 어떻게 만들 수 있나요?

비정사각형 PNG 이미지에 대한 CSS 그림자 효과

CSS를 사용하여 정사각형이 아닌 PNG 이미지에 그림자 효과를 만드는 것은 까다로울 수 있습니다. . box-shadow 속성을 사용하는 표준 접근 방식은 이미지의 윤곽을 따르지 않는 사각형 그림자를 생성합니다.

다행히도 필터 속성을 사용하는 솔루션이 있습니다.

필터 사용: dropShadow()

필터: dropShadow() 속성을 사용하면 흐린 효과를 만들 수 있습니다. 사용자 정의 오프셋 및 색상을 사용한 그림자 효과:

filter: drop-shadow(x y blur color);

여기서:

• x와 y는 그림자의 가로 및 세로 오프셋을 나타냅니다.
• 흐림은 흐림을 결정합니다. 그림자의 반경
• 색상은 그림자 color

CSS 예:

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

인라인 예:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="정사각형이 아닌 PNG 이미지에 대한 CSS 그림자를 어떻게 만들 수 있나요?" >

이 기술을 사용하면 정사각형이 아닌 PNG 이미지의 모양을 정확하게 따르는 그림자 효과를 만들어 사실적인 깊이와 차원.

위 내용은 정사각형이 아닌 PNG 이미지에 대한 CSS 그림자를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!