css - -webkit-filter: 他のブラウザのドロップシャドウ

Question

次の css を使用して適用しているドロップ シャドウ効果があります。

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

これに相当するものを他のブラウザで知っている人はいますか。

box-shadow: 0 1px 10px rgba(113,158,206,0.8)これは形状のcss矢印部分の周りに影効果を適用しないため、使用できないことに注意してください

フィドル

Answer 1

私はこれを理解しました - Opera と firefox に相当するものは次のとおりです:

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

drop-shadow.svg は次のようになります。

<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 は非常にがらくたなので、svg 値 feOffset、feFlood、または feMerge をサポートしていないため、現在同等のものはありません

誰かが IE でこの効果を行う方法を見つけた場合に備えて、これを開いたままにします

アップデート

この投稿を見つけてくれた psdie に感謝します

IE バージョン:

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";

Answer 2

Firefox は、プレフィックスなしのドロップシャドウ フィルターをサポートするようになりました。
OS X MDN ドキュメントの FF 43.0.4 で確認: filter - CSS - MDN