CSS에서 불규칙한 PNG 이미지에 대한 그림자를 어떻게 만들 수 있나요?

CSS에서 불규칙한 PNG 이미지에 그림자 적용

불규칙한 모양의 PNG 이미지에 그림자 효과를 만드는 것은 어려울 수 있습니다. 표준 CSS box-shadow 속성을 사용합니다. 이는 box-shadow가 이미지 주변에 사각형 모양의 그림자를 추가하기 때문인데, 이는 이미지 속 객체의 모양과 일치하지 않습니다.

해결책: CSS 필터 속성 사용

불규칙한 모양의 PNG 이미지에 그림자를 추가하려면 dropShadow() 함수와 함께 CSS 필터 속성을 사용할 수 있습니다. 이 함수는 x-오프셋, y-오프셋, 흐림 반경 및 색상의 네 가지 매개변수를 사용합니다.

예제 코드

다음은 드롭을 적용하는 방법에 대한 예입니다. dropShadow() 함수를 사용한 그림자:

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

이 예에서는 그림자를 적용합니다. x 및 y 방향 모두 5px 오프셋, 5px 흐림 반경 및 검정색(#222)을 사용합니다.

인라인 스타일링

신청할 수도 있습니다. 스타일 속성을 사용하여 드롭 섀도우 인라인:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

dropShadow() 함수를 사용하면 다음을 수행할 수 있습니다. PNG 이미지의 모양을 정확하게 따르는 그림자를 만들어 시각적으로 더욱 매력적이고 사실적인 효과를 제공합니다.

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