twitter-bootstrap - 边框颜色和背景颜色在悬停时变得模糊

Question

我正在研究一些 CSS 样式。我在 Bootstrap 导航栏中有一个 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

这就是原因。当某物如此之小时，它的分辨率也很小。当您制作椭圆时，像素会变成“四四方方”(模糊)以创建该曲线。我建议将此 Logo 制作成 PNG 或类似的东西，然后将其作为 <img/> 调用。