CSS-градиент на псевдоэлементе в IE9

Question

Кто-нибудь знает решение для установки градиента CSS для псевдоэлемента в IE9?

Это мой подход:

http://jsbin.com/iquhut/edit#html,live

Кажется, фильтр не применяется к псевдоэлементам или я что-то пропустил?

Answer 1

Используйте изображения. IE9 не поддерживает CSS-градиенты (префикс -ms- работает только для IE10), а фильтры dx (которые вы использовали в коде exapmle) очень плохо влияют на производительность (и содержат ошибки).

Кроме того, вы можете использовать холст для визуализации градиента, а затем установить этот градиент в качестве фона URL-адреса для вашего элемента.

В качестве альтернативы, вы можете использовать SVG градиентные фоны, но тогда вам нужно будет скрыть их от других браузеров (хорошо, у нас все еще есть условные комментарии в ie9). Имейте в виду, что они тоже глючат . Но не такой глючный, как фильтры.

Answer 2

Практически такой же эффект возможен с простой тенью от блока при установке отрицательного радиуса распространения.

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

Пример: (http://jsbin.com/ekehoz/edit#html,live)

box-shadow: 0px -15px 30px -10px #888;