[CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック
Post on:2010年4月16日
sponsors
CSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。
How To Get Smoother Rounded Corners
デモページ
この現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。
上記キャプチャはそのSafari(Mac)のもので、下記はそれを拡大したものです。
角丸の拡大
この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られます。
これを少しでも滑らかにするためのトリックを紹介します。
ビフォー
HTML
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="before" id="before10"> <p>10px before</p> </div> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="css" cols="60" rows="5"> .before{ border:1px solid #89a; background:#369; color:#def; } #before10{ moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } </textarea> |
アフター
HTML
HTMLの変更はありません。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="after" id="after10"> <p>10px after</p> </div> </textarea> |
CSS
カラーの異なるエレメントで分けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<textarea name="code" class="css" cols="60" rows="5"> .after{ border:1px solid #89a; } .after p{ background:#369; color:#def; } #after10{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } #after10 p{ -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; } </textarea> |
外側のエレメントにはborderとborder-radiusを指定し、内側のエレメントにはbackgroungのカラーと外側より一回り小さいborder-radiusを指定します。
非常にシンプルなトリックですが、効果は大きいです。
適用後のアフターでは角丸は明らかに滑らかに描画されています。
参考：各ブラウザのキャプチャ
Safari
Firefox
Safari(PC)
Chrome
sponsors
