質問: 以下状況で角丸の線がジャギーしてしまいます。 ・chorme(最新) ・黒ベタ塗り背景 ・白ボーダー線の角丸(正円) htmlコード ------- ``` ### ### ``` ### CSSコード ``` .wrapepr-btns { background: #000000; width: 100%; height: 100%; } .list-btns > li { display: inline-block; margin-left: 15px; } ul.list-btns> li > div.button-circle { width: 50px; height: 50px; text-align: center; border: 1px solid #ffffff; border-radius: 50%; } ul.list-btns> li > div.button-circle a { display: inline-block; width: 100%; height: 100%; } ``` 角丸のborderを2pxにすると滑らかになっているようは見えますが、 1pxですとジャギーがひどいです。 背景が黒もしくは暗めの場合のみそう見えます。 同じような経験のあるかた、 もしくは上手いテクニックをご存知の方 教えてきた頂きますと幸いです。
回答: 1pxの曲線/斜線は、どうしてもそうなります。 下記記事はフォトショップにおけるにじみの話ではありますが、「シェイプレイヤーがにじむ原因」の図を見てください。それと同じことが曲線描画時に起こっています。 【Photoshop、シェイプレイヤーはにじまない。角丸だってゆがまない。 - Alan Smithee!】 > > 斜線や曲線は、境界に近い色をおいて少し補間することにより線が滑らかに見えるようにしています。 > > > 「境界に近い色をおいて少し補間」ということは、線と背景のコントラストが高い&補完に使えるピクセルが少ない場合、線として表現するのに無理がある(ジャギーが出る)、ということになります。 「画像処理ソフトで出力した線は綺麗じゃないか!」と思われるかもしれませんが、それは補完アルゴリズムが違うからだと思われます。比較的Chromeは速度を優先するのでレンダリングが汚いという印象があります。