css-角丸 - Fieds_labo1

css　角丸

border-radius
モダンブラウザでは、CSS3を利用して矩形の角丸が可能です。
で、角丸のために安易にIE9を標準モードにしたら、あちこちが歪んで＠＠；
Tableでレイアウトしてるのは、直すの大変かも。
Tableで画像で角丸してるのをCSSの指定でできるかなと思ったけど、

• ボーダーの重なり指定で変わる。
• tdでcolspanしてると変わる。
• 画像がベースライン揃えになって、ボトム揃えをtdとimgにしまくる必要がある。
• tableなどにfont-sizeを指定していると、tdがそのサイズの高さになる。
  • 文字無しでも高さがfont-size分になる。
  • 空白gif使ったレイアウトはだめかも。
  • tdで小さいfont-sizeを指定すればOK。

で、角丸したいがためにかなり大変な見直しに＠＠；

• CSSフォントサイズ比較表&テスト
• CSS でセルの隙間をあけずにテーブルを角丸にする
• border-collapse
• border-spacing
• 境界線の表示方法
• border-collapseプロパティ

• IE9のブラウザーモードとドキュメントモード
• FC2ブログでIE9の機能（HTML5やCSS3）を使う方法
• IE8のモードスイッチ
• Doctypeスイッチ

• IEもIE9から角丸に対応しています。
• CSS3 角丸を表現する border-radius
• IE9 + border-radius(CSS3) の落とし穴？
• border-radius