-webkit-filter: drop-shadow for other browsers

前端 未结 2 1462
青春惊慌失措
青春惊慌失措 2020-12-01 23:12

I have a drop shadow effect that I am applying using the following css:

-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));

Does

相关标签:
2条回答
  • 2020-12-01 23:36

    Ok I have figured this out - the equivalent for opera and firefox is:

    filter: url(drop-shadow.svg#drop-shadow);
    

    where drop-shadow.svg looks like this:

    <svg height="0" xmlns="http://www.w3.org/2000/svg">
     <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
        <feOffset dx="1" dy="4" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.3)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </svg>
    

    IE being so crap doesn't support the svg values feOffset, feFlood or feMerge so doesn't currently have an equivelant

    I'll leave this open in-case anyone figures out how to do this effect for IE

    UPDATE

    Thanks to psdie for finding this post

    IE Version:

    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
    
    0 讨论(0)
  • 2020-12-01 23:36

    Looks like Firefox now supports the non-prefixed dropshadow filter.
    Confirmed in FF 43.0.4 on OS X MDN documentation: filter - CSS - MDN

    0 讨论(0)
提交回复
热议问题