丸みを帯びて縁取りがスムーズでない

Question

角が丸いボタンを追加しました。丸ボタンで少しぼかして表示されます。

.btn { 
 
    border: 1px solid #4278ae; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border-radius: 100%; 
 
}

<a href="#" class="btn">Test</a>

私は、この平滑なように見えるしたいです。どうすればこれを達成できますか？

Answer 1

1pxは私たちの目には見えません。コードに問題はありませんが、より良い見通しを得るために2pxを使用することができます。

あなたはピクセルがこのように動作知っているように、

そこで我々は、曲線が明確で/滑らかでないかのようにそれを参照してください。

.btn { 
 
    border: 2px solid #4278ae; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    border-radius: 100%; 
 
}

<a href="#" class="btn">Test</a>

ボーダーの代わりに

Answer 2

利用のBox-shadowプロパティ：

border: 1px solid #4278ae; 

それがより明確に見える

の代わりに

box-shadow: 0px 0px 3px 0px #4278ae;