悬停时边框颜色和背景颜色变得模糊

Question

我正在研究一些CSS样式。我在bootstrap导航栏中有一个css圈。一切看起来都很好，工作正常。

然而，在悬停按钮时，看起来圆圈的边框变得“模糊”。喜欢这个

在这张小图片上看起来可能比较难看，但是你可以看到蓝色边框变得像素化并且模糊不清。

有谁知道造成这种情况的原因是什么？非常感谢任何帮助

码

圆圈

.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;
  }
}

导航栏按钮（少）

par(mfrow=c(1,2))

Answer 1

原因如下。当某些东西如此小，它的分辨率很小。当你制作一个椭圆形时，像素正在变成“四四方方”。 （模糊）以创建该曲线。我建议将此徽标设为PNG或类似名称，然后将其称为<img/>