ホバーでボーダーカラーと背景色が曖昧になる

Question

私はいくつかのCSSスタイリングに取り組んでいます。私はブートストラップナビバーの中にCSSサークルを持っています。すべてが素敵に見え、うまく動作します。

しかし、ボタンのホバーでは、円の境界線が「あいまい」になっているように見えます。この

のようにこの小さな画像で見ることが難しいかもしれませんが、あなたは青い枠線がピクセル化し、ぼやけなり見ることができます。

原因を知っている人はいますか？任意のヘルプははるかに

コード

ここ円

span.circle-name { 
    -moz-border-radius:50%; 
    -webkit-border-radius:50%; 
    border-radius: 50%; 
    border: 1px solid #5A9ADE; 
    background-color: #FFFFFF; 
    color: #5A9ADE; 
    height: 60px; 
    width: 60px; 
    text-align: center; 
    vertical-align: middle; 
    padding-left: 14px; 
    padding-right: 14px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    font-size: 1.3em; 
} 

ナビゲーションバーボタン（以下）

.navbar-user { 
    .dropdown-toggle { 
    color: #444444; 
    text-decoration: none; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    } 

    .btn-group.open .btn.dropdown-toggle { 
    background-color: #5B5B5B; 
    color: #FFFFFF; 
    border-radius: 0; 
    } 

    .btn-group .btn.dropdown-toggle:hover { 
    background-color: #5B5B5B; 
    color: #FFFFFF; 
    border-radius: 0; 

    .caret { 
     border-top: 4px solid #FFFFFF; 
    } 
    } 

    .btn-group > .dropdown-menu { 
    margin-top: -15px; 
    margin-left: 3px; 
    border-radius: 0; 
    } 

    @media (max-width: 767px) { 
    .btn-group > .dropdown-menu { 
     margin-top: 0; 
     margin-left: -77px; 
    } 
    } 

    .caret { 
    border-top: 4px solid #444444; 
    } 

    .open .caret { 
    border-top: 4px solid #FFFFFF; 
    } 
} 

Answer 1

が理由であると理解されます。何かが非常に小さいとき、それは小さい解像度を持っています。楕円を描くと、ピクセルはそのカーブを作成するために「ボクシー」（曖昧）になります。私はこのロゴをPNGなどのものにすることをお勧めします。<img/>