ie-css3

HTML5 やら CSS3 やらで、
ブラウザが対応してるやしてないやら...。


最近、ドロップシャドウと角丸をつける必要があり、
探した結果がこれ。

ie-css3.htc

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