【CSS3】角丸のレイアウト(border-radius)
HTML5では画像やJavaScriptを使わずに、角丸のレイアウトを実装することができます。
【使用例】
p { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #0000FF; padding:5px; }
「border-radius」で角丸を指定します。FirefoxとSafari、Chromeではベンダープレフィックスを付けた「-moz-border-radius」「-webkit-border-radius」で指定します。
【書式】
border-radius:[水平方向の半径] [垂直方向の半径];
垂直方向の半径の値を省略した場合は、水平方向の半径が両方に適応されます。
また、角丸レイアウトを適応する領域の4つ角の半径を別々に指定することもできます。
【角丸を指定するプロパティ】
全体 → border-radius
右上 → border-top-right-radius
右下 → border-bottom-right-radius
左下 → border-bottom-left-radius
左上 → border-top-left-radius
【対応ブラウザ】
FireFox3.5以降、Opera10.6以降、Safari4以降、Chrome3以降
コメントを残す