及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > 角丸（CSS3）

角丸（CSS3）

表示例

Internet Explorer ではIE9以降しかきちんと角丸にならない。
IE9 以降での見え方↓
及川治建築設計室
IE6,IE7,IE8 では角丸にはなっていない。
IE6,IE7,IE8 での見え方↓

サンプル

及川治建築設計室 

及川治建築設計室



.radius10px {
border:1px solid #666;
border-radius: 10px 10px 10px 10px;         /* CSS3 */
-moz-border-radius: 10px 10px 10px 10px;    /* Firefox */
-webkit-border-radius: 10px 10px 10px 10px; /* Safari,Chrome */
padding:10px;
}
・2行目「border:1px solid #666;」でボーダーの太さと線種と色を設定
・3行目「border-radius: 10px 10px 10px 10px; 」で角丸を指定。10pxが、角の半径。
・4～5行目は Firefox,Safari,Chrome 用の記述。

IE6/IE7/IE8 でも角丸を可能にする - CSS3 PIE を使う

「CSS3 PIE」は、CSS3非対応のIE6/IE7/IE8 でも、CSS3の
・角丸(border-radius)、
・影（box-shadow）、
・画像ボーダー(border-image)、
・背景に複数画像指定(multiple background images)、
・グラデーション(backgroundプロパティのlinear-gradient()関数)、
・・・などを表示可能にしてくれるオープンソースのプログラム。
こちらの公式サイト↓からプログラムをダウンロードできます。CSS3 PIE: CSS3 decorations for IE

ダウンロードしたファイルを解凍し、その中の「PIE.htc」を自分のサイト内の任意の場所に設置する。
そして、角丸を設定したクラスに下記のスタイルを追加する。

behavior:url(/path/PIE.htc);	/* PIE.htc へのパスは表示HTMLからの相対 */
※上記の /path/ の部分は、ボタンを表示するHTMLファイルからの PIE.htc へのパス。

サンプル

及川治建築設計室
IE6/IE7/IE8 でもきちんと角丸になっている。
<div class="radius_ie6" style="text-align:center;">
及川治建築設計室
</div>

.radius_ie6 {
border:1px solid #666;
border-radius: 10px 10px 10px 10px;         /* CSS3 */
-moz-border-radius: 10px 10px 10px 10px;    /* Firefox */
-webkit-border-radius: 10px 10px 10px 10px; /* Safari,Chrome */
padding:10px;
behavior:url(/path/PIE10b5/PIE.htc);/* 表示HTMLからの相対 */
position: relative;	/* for IE */
}
※「position: relative;」も追加する。
私はこれではまりました。「position: relative;」を入れないとIE6では角丸にならなかった。

MENU Ξ