本日は「CSS3　PIE」についてです。

企業サイトでも、サイトマップなどでは特に
CSS3で角丸にしてたりするのをみかけるので
重い腰をあげてそろそろCSS3を使用していこうと思い、
IE（6～8）にもCSS3の角丸やグラデーションを適用してくれる「CSS3　PIE」を使用してみました。

使用するには、
まず下記より「PIE.htc」をダウンロードし所定の位置に保存。
»CSS3 PIE

後はCSSに
「behavior: url(/パス/PIE.htc); 」
と追加するだけです。
※ 読み込まなかった経験はないですが、http://～始まる絶対パスを記述しても反応しないこともあるそうです。

div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
behavior: url(/PIE.htc); ←これを追加するだけ
}

WordPressで使用する場合は、

behavior: url(/wp-content/themes/テーマ名/PIE.htc); 

という風に簡単に使用できます。

CSS3　PIEを適用している要素の背景などが
きちんと表示されない場合はさらにその要素に

position:relative;

を追加することで回避できます。

また、下記のように個別に指定しても反応しないようです。

border-top-right-radius: 10px;

CSS　グラデーションを使用する際は

-pie-background: linear-gradient(top,#FFF,#999);

という風に頭に「-pie-」を追加したものを追加しましょう。つけないと反応しないことが多かったです。
しかし、ｉｅ９はCSS　グラデーションに対応していませんので別の対策が必要です。

各ブラウザのCSS3の対応状況は下記で確認できます。
»findmebyip｜HTML5 & CSS3 Support

色々試している途中ですし
まだまだ他にも問題がでてくると思いますが
背景画像などとうまく組み合わせて
かっこよく使用してみたいと思います。
次はトグル処理を試したいと思ってます。