ie-css3
HTML5 やら CSS3 やらで、
ブラウザが対応してるやしてないやら...。
最近、ドロップシャドウと角丸をつける必要があり、
探した結果がこれ。
ie6以上にもきちんと対応しているそうです。
実装の仕方はとても簡単で、ざっと以下のような感じ。(class="box"が対象の要素)
.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(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ }
最後に ie-css3.htc を読む込むだけって...。
追記>>
どうやら影の色は黒だけのよう。
また触れたら触ってみよう!
ref:
IEでもCSS3を対応させたい時の対処法”ie-css3.htc” | KRUZ-GRAPHIX