firefox에서 CSS3 효과처럼 그림자를 적용하십시오.

나는 CSS3의 그림자를 사용하는 프로젝트에서 작업 중입니다. Drop Shadow는 알파 픽셀을 갖는 이미지에도 적용됩니다. Chrome에서 정상적으로 작동합니다. 문제는 파이어 폭스에서 발생합니다. 나는 그것에 대한 대안을 원한다. 현재 SVG를 사용하여 그림자 같은 효과를 렌더링하지만 너무 무거워서 더 이상 문제를 일으키지 않습니다. 파이어 폭스에서 같은 기능을 구현할 수 있도록 몇 가지 아이디어를 얻고 싶습니다.firefox에서 CSS3 효과처럼 그림자를 적용하십시오.

Pls 도움. 감사.

출처

2014-07-09 JayKandari

그림자와 관련하여 Firefox에서 직면 한 문제는 무엇입니까? 질문에 샘플 코드를 포함시킬 수 있습니까? – Harry

예 : Chrome 및 Firefox에서이 (http://jsfiddle.net/JayKandari/q83wE) 바이올린을로드 해보세요. Chrome에서는 작동하지만 Firefox에서는 작동하지 않습니다. 모든 대안. 감사합니다 – JayKandari

[이 SO 스레드를 참조하십시오 (http://stackoverflow.com/questions/16802308/drop-shadow-not-showing-up-in-latest-firefox). 파이어 폭스가 CSS 필터를 완벽하게 지원하지 않는 것 같습니다. [here] (http://caniuse.com/css-filters)에서 모든 Firefox 버전에서 지원이 매우 미약하다는 것을 알 수 있습니다. 따라서 Robert의 답변에서 언급 한 것과 같은 다른 방법을 사용해야 할 수도 있습니다. – Harry

Firefox는 filter effects working draft<feDropShadow> 요소를 구현합니다. 이것은 최적화되어 있으므로 모든 개별 필터를 함께 묶는 것보다 다소 빠르게 작동합니다.

아래 예제는 SVG 1.1 그림자 및 새 <feDropShadow>을 보여줍니다.

<svg viewBox="0 0 800 400" 
    xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <filter id="feDropShadowEquiv1"> 
     <feGaussianBlur stdDeviation="3"/> 
     <feOffset dx="3" dy="3" result="offsetblur"/> 
     <feFlood flood-color="#720"/> 
     <feComposite in2="offsetblur" operator="in"/> 
     <feMerge> 
      <feMergeNode/> 
      <feMergeNode in="SourceGraphic"/> 
     </feMerge> 
    </filter> 
    <filter id="feDropShadow1"> 
     <feDropShadow stdDeviation="3" flood-color="#720"/> 
    </filter> 
    </defs> 
    <g font-family="Verdana" font-size="30"> 
    <text x="100" y="90" filter="url(#feDropShadow1)">feDropShadow</text> 
    <text x="100" y="140" filter="url(#feDropShadowEquiv1)" >feDropShadow</text> 
    </g> 
</svg>

출처

2014-07-09 07:50:03

firefox에서 CSS3 효과처럼 그림자를 적용하십시오.

답변

관련 문제