PIE.htcを使い、IE6,IE7,IE8でCSS3の角丸を表示する

 PIE.htcを使うとIE6,IE7,IE8でCSS3の「角丸」などが使用できます。実際に使って見ました。使うことができるプロパティは下記の5種類になります。

border-radius(ボックスに角丸をつける)
box-shadow(ボックスに陰影をつける)
linear-gradient(背景にグラデーションをつける)
border-image(境界線に画像を使う)
multiple background images(背景に最大4つの画像を使用できる)

PIE.htcの設置
最初にPIE.htcをダウンロードします。
https://github.com/lojjic/PIE/downloads

次にダウンロードしたファイルを解凍し配置します。
私は解凍したフォルダー(PIE-1.0.0)を「PIE」にリネイムし、htmlファイルと同階層に設置しました。

スタイルを効かせたいオブジェクトにCSSファイルにパスを通します。その時、「position:relative;」を効かせないとボーダーが表示されない場合があるので注意して下さい。
behavior:url(“PIE/PIE.htc”);

PIE.htcのサンプル
簡単ではありますが、サンプルを作っていましたので良かったら参考にしてください。
サンプルには、角丸、シャドウ、グラデーションを使用しています。

CSSの記述例

/* 角丸 */
-webkit-border-radius:7px;
-moz-border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
border-radius:7px;

/* ボックスシャドウ */
box-shadow:5px 5px 10px #333333;

/* グラデーション */
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ff4ed3));
background-image: -moz-linear-gradient(top, #ffffff, #ff4ed3);
background-image: -ms-linear-gradient(top, #ffffff, #ff4ed3);
background-image: -o-linear-gradient(top, #ffffff, #ff4ed3);
background-image: linear-gradient(top, #ffffff, #ff4ed3);
-pie-background:linear-gradient(#ffffff, #ff4ed3);

position:relative;
behavior:url(“PIE/PIE.htc”);

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

(参考サイト)
http://www.waldiz.com/article.php/pie
http://www.webcoding.jp/coding_memo/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0tips/css3%C3%97pie-htc-%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9.html

Be the first to comment on "PIE.htcを使い、IE6,IE7,IE8でCSS3の角丸を表示する"

Leave a comment