2009/12/31

CSS:: border-radiusの実装

CSS3からborder-radius(コーナーを丸角にする)が実装されましたが、まだ未着手だったので試してみました。 他ブログでも書いてましたが、
  1. FireFox 3.5.6
  2. Opera 10.5pre
  3. Safari 4.0.3
では実装&動作確認できましたが
  1. IE 6,7,8
では実装&動作しませんでした(IE8もなんですよね・・・) 各ブラウザごとの対応をメモしておきます。

★IE以外
 CSSに以下の内容を追加
  • border-radius: Xpx;
  • -moz-border-radius: Xpx;(Firefox用)
  • -webkit-border-radius: Xpx;(Safari用)
★IE
 HTC(HTML Component:JavaScriptで記述)で対応
 CSSに以下の内容を追加
  • behavior:url(border-radius.htc);
 border-radius.htcはこのサイトのものを使用しました。
 作者の方、ありがとうございます。
 
 ※Behaviorってなに?
 Behaviorは、HTML/Dynamic HTML/JavaScript等によって構成されるHTML ComponentをHTML上で使用する機能。
 HTCファイルを使用することで関数の再利用/カプセル化が可能。

2010.02.04 Update!!
 DD_roundiesでも丸角できるようです。
スポンサーリンク

スポンサーリンク