css - IE9 の疑似要素の CSS グラデーション

Question

IE9 で疑似要素に CSS グラデーションを設定するための解決策を知っている人はいますか?

これが私のアプローチです：

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

疑似要素にフィルターが適用されていないように見えますか、それとも何か見逃していましたか?

Answer 1

画像を使用します。IE9はcssグラデーションをサポートしていません（-ms-プレフィックスはIE10でのみ機能します）。また、dxフィルター（例のコードで使用したもの）はパフォーマンスに非常に悪いです（そしてバグがあります）。

または、canvasを使用してグラデーションをレンダリングし、そのグラデーションを要素のdata-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;