-webkit-filter: drop-shadow для других браузеров

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 arrow

скрипка

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, поэтому в настоящее время у него нет equivelant

Я оставлю это открытым на случай, если кто-нибудь выяснит, как сделать этот эффект для 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 теперь поддерживает фильтр без префиксов drophadow.
Подтверждено в FF 43.0.4 в OS X документация MDN: фильтр - CSS - MDN