IEでも角丸と影をCSS3で表現したい！しかも簡単に！

CSS3で角丸とかドロップシャドウなどの表現がラクチンになったんですが、
プロの現場ではそうでもなかったりします。
IEはCSS3をほとんど（まったく？）受け付けません。もうね、意地になっているんじゃないか？と思うほど。
そんなIEに角丸とドロップシャドウを適応させるCSSテクニックを紹介します。

IEでドロップシャドウを適応させたい

<!--[if IE]>
<style type="text/css">
.container {padding-left:14px;}
.frame {left:4px; top:4px;}
.shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
</style>

<![endif]-->

クラス.shadowで影の表現を指定してます。
Shadow Boxing for all except Opera
デモ

IEで角丸を適応させたい

-moz-border-radius: 32px;//for Firefox
-webkit-border-radius: 32px;//for Safari and chrome
border-radius: 32px;//CSS3
behavior: url(border-radius.htc);//for IE

こちらはIEでは難しかった角丸の表現をCSSで簡単に実現します。
このコードは、Google Code でhtcファイルを配布しています。
「border-radius.htc」ファイルをダウンロードして、CSSに以下のように記述すれば、クロスブラウザで角丸を表現できます。
Rounded corner HTML elements using CSS3

ドロップシャドウのネタ元：　コリス IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート
角丸のネタ元：　CREAMU CSS3でIEにも角丸を適用させるhtcファイル

しばらくは、IEとの格闘は続きそうです。世界中のブラウザの規格が統一されますように。

Share/Bookmark

5 Responses so far.

1. Henry Tone より:

   2010年12月4日 10:25 AM

   Can I’ve a phrase of information? I’m certain youve received one thing superb through here. But suppose you provided some links to a website which supports what you’re? As well as you could possibly supply us some extra material to consider, something that will connect what you had been mentioning, a little something more concrete?

   返信
2. Roy Eveler より:

   2010年12月4日 2:20 PM

   Hey… It looks like there’s a problem with all the layout on the page. For some explanation the text block is running into the edge. I do not know if it is just me or are other individuals reporting the exact same issue? Just wanted to let you know in case you have been updating the web site.

   返信