CSS3もやっとこさコーディングの選択肢となりつつありますね。うれしい限りです。角丸かつ影つきのグラデーションの効いた画像を作るスキルがなくても、コーディングのスキルさえあればそれらしい絵になるっていうのが素晴らしい。

IE9も正式にHTML5/CSS3への対応を表明し、「さぁこれからはHTML5/CSS3だ！！」
と意気込んだものの、やっぱりIEはIEでした。笑

実は、IE9は背景グラデーションに対応してない！

各レンダリングエンジンによって記述が微妙に違うからコード増えるし鬱陶しいとか思ってたけど、きちんと書いたらきちんとグラデかかるから、まだましだってことに気づいた今日。苦笑

さて。ではどうやってIE9で背景グラデーションを実現するか。（←やっと本題）

当然といえば当然なんだけど、画像を使います。笑（身も蓋もないとか言わないでw）
SVGっていう拡張子のファイルを作成するんだけど、実はその中はXMLだったといふ。。

Scalable Vector Graphics

んまぁそんなわけで、結論から言うと、以下の手順で進めばIE9でも背景グラデーションできます。

とりあえず原文：
CSS Gradients for IE9

1. 任意の場所に以下のSVGファイルを作成

<?xml version=”1.0″ ?>
<svg xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”none” version=”1.0″ width=”100%”
height=”100%”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
<defs>
<linearGradient id=”myLinearGradient1″
x1=”0%” y1=”0%”
x2=”0%” y2=”100%”
spreadMethod=”pad”>
<stop offset=”0%”   stop-color=”#fee9ed” stop-opacity=”1″/>
<stop offset=”25%”   stop-color=”#ffa0b2″ stop-opacity=”1″/>
</linearGradient>
</defs>
<rect width=”100%” height=”100%”
style=”fill:url(#myLinearGradient1);” />
</svg>

当然、.svgで保存。今回はie9.svgとした。

2.CSSプロパティにbackground-imageを追加

background-image:url(/css/ie9.svg);

画像だからimgディレクトリに入れた方がよかったかな・・・？

IE9だけに適用させたいので、background関連の記述の最上部に配置する。

border:1px solid #ff90de;
background-image:url(/css/ie9.svg);
background:-moz-linear-gradient(#fee9ed 0,#ffa0b2 25%) !important;
background:-o-linear-gradient(#fee9ed 0,#ffa0b2 25%) !important;
background:-webkit-gradient(linear,left top,left 25%, from(#ffe9ed),to(#ffa0b2)) !important;
background:linear-gradient(#fee9ed 0,#ffa0b2 25%) !important;
-pie-background:linear-gradient(#fee9ed 0,#ffa0b2 25%) !important;
behavior:url(/js/PIE.htc);

なお、上のコードはCSS3 PIEを使い、IE6〜8でグラデーションが効くように設定している。

方法としてはこれだけ！

至って簡単です。

ちなみに、今回作ったie9.svgというSVGファイルの

<stop offset="0%"   stop-color="#fee9ed" stop-opacity="1"/>
<stop offset="25%"   stop-color="#ffa0b2" stop-opacity="1"/>

この部分を変えてやれば、好きなグラデーションになると思います。

＊＊参考サイト＊＊

IE9でグラデーションを実現する方法