CSS3를 사용하여 SVG Drop Shadow를 어떻게 만들 수 있나요?

CSS3을 사용한 SVG Drop Shadow

CSS3을 사용한 Drop Shadow 구현

CSS3을 사용하여 SVG 요소에 그림자 효과를 추가할 수 있습니다. 이전의 box-shadow 또는 -webkit-box-shadow 속성과 달리 최신 접근 방식에는 CSS 필터 속성을 활용하는 것이 포함됩니다.

CSS 필터 속성 사용

webkit, Firefox와 같은 널리 사용되는 브라우저에서 지원됩니다. 34 및 Edge의 CSS 필터 속성은 그림자 효과에 대한 전용 구문을 제공합니다.

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

그림자 적용 효과

".shadow" 클래스가 있는 SVG 요소에 필터 속성을 적용합니다.

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}

그림자 효과는 ".shadow" 클래스가 있는 모든 SVG 요소에 적용됩니다. , 이미지, 도형 및 그룹을 포함합니다. 필터 기능 내의 값을 조정하여 그림자의 모양을 사용자 정의할 수 있습니다.

브라우저 간 호환성

필터 속성만으로도 탁월한 지원을 제공하지만 FF와 같은 이전 브라우저의 경우 폴리필이 필요할 수 있습니다. < 34 또는 IE6. 폴리필은 필터 효과의 동작을 모방하여 더 넓은 범위의 브라우저에서 호환성을 보장할 수 있습니다.

위 내용은 CSS3를 사용하여 SVG Drop Shadow를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!