以下状況で角丸の線がジャギーしてしまいます。
・chorme(最新)
・黒ベタ塗り背景
・白ボーダー線の角丸(正円)
##htmlコード
<div class="wrapepr-btns"> <ul class="list-btns"> <li> <div class="button-circle"> <a href="#" target="_blank"> <span class="icon-font">###</span> </a> </div> </li> <li> <div class="button-circle"> <a href="#" target="_blank"> <span class="icon-font">###</span> </a> </div> </li> </ul> </div>
###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ですとジャギーがひどいです。
背景が黒もしくは暗めの場合のみそう見えます。
同じような経験のあるかた、
もしくは上手いテクニックをご存知の方
教えてきた頂きますと幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/27 05:41
2017/03/27 06:33