[CSS]img タグの画像を border-radius で角丸にして表示する方法
スポンサード
例として、四隅を 10px の角丸にしています。
IE 向けのサンプルはこちら。
IE6、IE7、IE8 用に PIE.htc 補正のデモ
※PIE.htc の使い方は、別途こちらの記事で紹介しております。
スポンサード
以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius
の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
目次
画像を角丸で表示させる
<img>
タグに直接 border-radius
を適用させます。例として、四隅を 10px の角丸にしています。
.box img { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }見え方としては、角丸にしてマスクする、みたいなイメージでしょうか。
IE6、IE7、IE8 用に PIE.htc で補正
個人的にはborder-radius
に関しては IE下位バージョン向けの対応しませんが、どうしても必要な場合には PIE で補正をかけます。.box img { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*IE下位バージョン用に補正*/ position:relative; behavior: url(./PIE.htc); }こんな感じで表示されます。
IE 向けのサンプルはこちら。
IE6、IE7、IE8 用に PIE.htc 補正のデモ
※PIE.htc の使い方は、別途こちらの記事で紹介しております。
スポンサード
コメント