CSS3 PIE

前にCSS3をIEにも対応させるために、

ie-css3 - 徹夜族

という記事を書きました。

しかし、影が黒だけだったり...(思い過ごしかも)
あまり自分好みではなかったのでした。

最近、はてなのホットエントリーを見てると、

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

があったので、メモ代わりに書いておく。

ie-css3.htc と同じように、

CSS3 PIE: CSS3 decorations for IE

から、PIE.htc をダウンロードし、設置します。

それでCSSに、

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

を書けばIEでもきちんと角丸や影が表示されます。

重要なのは、

behavior: url(PIE.htc); 

を追加すること。

これはいい感じ!!