さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】角丸のレイアウト(border-radius)

Pocket
LINEで送る

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以降

カテゴリー:HP制作, css

コメントを残す

コメント内容