CSS3 角丸を表現する border-radius
- Category ：
- CSS3
今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。
正確にはCSS3の草案「CSS3 Backgrounds and borders Module」中なんですが、これが普通に使えればどれだけ楽になるか...って感じなので、使い方を紹介しておきたいと思います。
…ここからが続き
border-radius 基礎
現在のところ Safari、Google Chrome では -webkit-border-radius、Firefox では -moz-border-radius と指定するようになってます。
IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。
.demo {
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
- 表示例 : サンプルページ 1
特定部分だけを指定
左上の指定や右上の指定など各要素のみを指定する際は下記の用に二つの指定方法があります。
.demo {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
}
- 表示例 : サンプルページ 2 ※-webkit- と -moz- では指定方法が少し違うので注意して下さい。
border 要素を変えてみる
.demo1 {
border: 5px dotted #999;
}
.demo2 {
border: 5px dashed #999;
}
.demo3 {
border: 5px solid #999;
}
.demo4 {
border: 5px double #999;
}
.demo5 {
border: 5px groove #999;
}
.demo6 {
border: 5px ridge #999;
}
.demo7 {
border: 5px inset #999;
}
.demo8 {
border: 5px outset #999;
}
- 表示例 : サンプルページ 3
IE や Opera にも実装させる
IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。
- Curved corner (border-radius) cross browser | HTML Remix
- border-radius.js - JavaScript ライブラリー - HTML5.JP
Curved corner (border-radius) cross browser
IE6 IE7 IE8 で実装はされますが、Opera は非対応です。後背景画像を指定した際思い通りに表現してくれませんでした...
border-radius.js
今のところ IE8 には対応してない状態です。
