[CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック

CSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。

デモのキャプチャ

How To Get Smoother Rounded Corners
デモページ

この現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。
上記キャプチャはそのSafari(Mac)のもので、下記はそれを拡大したものです。

デモのキャプチャ

角丸の拡大

この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られます。

これを少しでも滑らかにするためのトリックを紹介します。

ビフォー

HTML

CSS

アフター

HTML

HTMLの変更はありません。

CSS

カラーの異なるエレメントで分けます。

外側のエレメントにはborderとborder-radiusを指定し、内側のエレメントにはbackgroungのカラーと外側より一回り小さいborder-radiusを指定します。

非常にシンプルなトリックですが、効果は大きいです。
適用後のアフターでは角丸は明らかに滑らかに描画されています。

参考:各ブラウザのキャプチャ

デモのキャプチャ

Safari

デモのキャプチャ

Firefox

デモのキャプチャ

Safari(PC)

デモのキャプチャ

Chrome

sponsors

top of page

©2018 coliss