一昔前はtableタグ+画像で実現していた角丸(角の丸い見た目)も、 最近のブラウザーではCSSだけで実現できます。(IEは8以下は認識しません)
たとえば角が10px分丸い四角を用意したい場合は、
↓↓以下のように定義しています。
↑ご覧のブラウザーでは、黒い領域の角は丸くなって見えていますか?
例えば角を10px分、丸くしたい場合はそれぞれのブラウザーごとに、
CSS3で定義 | border-radius: 10px; |
---|---|
webkit系ブラウザー用(safariやchrome) | -webkit-border-radius: 10px; |
mozilla用(firefox用) | -moz-border-radius: 10px; |
opera用 | -o-border-radius: 10px; |
と、定義します。
対応させたいブラウザーごとにCSSを用意する必要があるようです。
記述が多くなりますが、画像やJavaScriptの用意がいらないので、これからぜひ導入したいですね。