[HTML&CSS-CSS] [CSS3]角丸を表現する border-radiusプロパティ
Firefox 3とSafari 3のCSSでは、W3CのCSS3で提案されている罫線の角丸を border-radiusプロパティ で設定すると使用することが出来ます。 IEやOperaでは対応していません。 IEやOperaでは下記のJavaScriptが利用できるようです。 …が、あまり実用に耐える物ではないかもしれません。
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 には対応してない状態です。CSS Lecture より引用
CSS3 の場合
CSS3では下記のように border-radiusプロパティで半径を指定します すべての角に設定(CSS3草案)
border-radius: xxpx;
個別に指定する場合は下記のとおり。
border-top-left-radius: xxpx; border-top-right-radius: xxpx; border-bottom-right-radius: xxpx; border-bottom-left-radius: xxpx;
Firefox の場合
Firefox 3では、下記のように記述します。 すべての角に設定(Firefox用)
-moz-border-radius: xxpx;
個別に指定する場合は下記のとおり。
-moz-border-radius-topleft: xxpx; -moz-border-radius-topright: xxpx; -moz-border-radius-bottomright: xxpx; -moz-border-radius-bottomleft: xxpx;
Safari の場合
Safari 3では、CSS3のプロパティに「-webkit-」を接頭に付けて記述します。 Firefoxのプロパティよりも覚えやすいですね。 すべての角に設定(Safari, Google Chrome用?)
-webkit-border-radius: xxpx;
個別に指定する場合は下記のとおり。
-webkit-border-top-left-radius: xxpx; -webkit-border-top-right-radius: xxpx; -webkit-border-bottom-right-radius: xxpx; -webkit-border-bottom-left-radius: xxpx;
サンプルコード
<html> <head> <title>角丸テスト</title> <style type="text/css"> * { margin: 0px; } #src { width: 500px; margin: 50px auto; padding: 5px; border-top: 2px solid #666; border-right: 2px solid #999; border-bottom: 2px solid #CCC; border-left: 2px solid #999; -moz-border-radius: 12px; -webkit-border-radius: 12px; } </style> </head> <body> <pre id="src"> width: 500px; margin: 25px auto 100px auto; padding: 5px; border-top: 2px solid #666; border-right: 2px solid #999; border-bottom: 2px solid #CCC; border-left: 2px solid #999; -moz-border-radius: 12px; -webkit-border-radius: 12px; </pre> </body> </html>
動作サンプル
「CSS」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。
作成日:2010年12月03日(Fri)