CSS를 사용하여 불규칙한 모양의 PNG 이미지에 대한 정확한 그림자를 어떻게 만들 수 있습니까?

CSS를 사용하여 불규칙한 모양의 PNG 이미지에 그림자 적용

-o-를 사용하여 PNG 이미지에 그림자를 적용하는 표준 접근 방식 상자 그림자, -icab-상자 그림자, -khtml-상자 그림자, -moz-상자 그림자, -webkit-상자 그림자, 또는 box-shadow 속성은 이미지를 정사각형으로 처리합니다. 이로 인해 그림자가 이미지의 실제 모양과 일치하지 않을 수 있습니다.

정사각형이 아닌 PNG 이미지의 윤곽을 정확하게 따르는 그림자를 적용하려면 CSS 필터 dropShadow()를 사용할 수 있습니다. 재산. 이 속성 구문은 다음과 같습니다.

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

여기서 x와 y는 각각 그림자의 가로 및 세로 오프셋을 나타내고, 흐림 효과는 그림자 가장자리의 흐릿함을 정의합니다. 선택적 색상 매개변수는 그림자 색상을 설정합니다.

이 기술은 일반 CSS 규칙을 사용하여 적용할 수 있습니다.

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

또는 개별 이미지에 대해 필터 인라인을 지정할 수 있습니다.

<img src="image.png">

필터: dropShadow() 속성을 사용하면 불규칙한 모양의 PNG 이미지에 정확한 그림자를 얻을 수 있어 시각적 매력을 향상하고 디자인에 깊이를 더해보세요.

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