CSS - 圆形边框看起来太像素化

Question

我需要一些帮助来修复我的圆形边框。它看起来很丑陋。我希望它更流畅，但无论如何我似乎无法修复它。我不知道我做错了什么。

这是它的图片：

这是我的 HTML：

<div class="sidebar">
    <!-- User avatar/message/notification/settings buttons -->
    <div class="userpanel">
        <div class="userpanel-image">
            <img src="image.jpg">
        </div>
        <div class="userpanel-buttons">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
        </div>
    </div>
</div>

这是我的 CSS：

.sidebar > .userpanel > .userpanel-image img {
    border: 1px solid white;
    border-radius: 25px;
    margin: 3px;
    margin-right: 25px;
}

Answer 1

这最终取决于您使用的显示器的pixel density。

每英寸像素 (PPI) 或每厘米像素 (PPCM) 是对电子图像设备（例如计算机显示器或电视显示器）或图像数字化设备（例如照相机或图像扫描仪。水平和垂直密度通常相同，因为大多数设备具有方形像素，但在具有非方形像素的设备上有所不同。

例如，一个 15 英寸（38 厘米）的显示器，其尺寸为 12 英寸（30.48 厘米）宽 x 9 英寸（22.86 厘米）高，最大分辨率为 1024×768（或 XGA）像素，可以在水平和垂直方向均显示约 85 PPI。该数字是通过将显示区域的宽度（或高度）（以像素为单位）除以显示区域的宽度（或高度）（以英寸为单位）来确定的。显示器可能具有不同的水平和垂直 PPI 测量值（例如，典型的 4:3 比例 CRT 显示器以最大尺寸显示 1280×1024 模式的计算机显示器，这是 5:4 的比例，与4:3)。显示器的表观 PPI 取决于屏幕分辨率（即像素数）和使用的屏幕尺寸； 800×600 模式下的显示器的 PPI 低于 1024×768 或 1280×960 模式下的同一台显示器。

具有较高像素密度的显示器在视觉上更倾向于平滑曲线。

您通常无法通过 HTML/CSS 或其他任何方式来提高像素密度显示。您只需学会适应显示器的质量或升级它。

在某些情况下，应用与您的圆圈颜色相同的 1px box-shadow 可以帮助显示器消除锯齿。但是，这也不是 100% 成功的。

Answer 2

你绝对没有做错什么。

也许只是因为边框太细了。尝试将border: 1px solid white; 更改为 2px、3px 或任何你喜欢的。试试看吧。

Answer 3

不幸的是，我多次遇到同样的问题。我认为这可能是一个无法 100% 解决的渲染问题。也许您可以使用我用于“边框问题”的解决方法使其看起来更清晰（我没有在每个浏览器上都对其进行测试，因此您可能必须检查一下）

body {background:black;}

div {
  width:100px;
  height:100px;
  display:block;
  background:#fff;
  border-radius:100%;
  padding:2px;
}

img {
  display:block;
  border-radius:100%;
  display:block;
  width:100px;
  height:100px;
}

<div>
  <img src="https://unsplash.it/100" alt=""> 
</div>

Answer 4

对我来说这看起来最好：

.userpanel-image {  
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: 0 0 1px 1px white;
  overflow: hidden;
}

.userpanel-image img {
  width: 98px;
  height: 98px;
}

Answer 5

通常当我遇到这个问题时，我只是降低颜色的对比度以帮助缓解像素化抗锯齿（正如我在评论中提到的）。然而，这并不总是一种选择。您面临的真正问题是浏览器将应用一定量的抗锯齿来防止完全锯齿状，而您实际上无法控制所应用的抗锯齿的强度。这是您可以用来帮助控制外观的替代方法。您可以使用 box-shadow 来补充或替换您现有的边框：

body {
  background: #223;
  padding-bottom: 25px;
  text-align: center;
  color: white;
}

div {
  margin-top: 25px;
}

img {
  display:inline-block;
  
  border-radius: 50%;
  border: 1px solid white;
  vertical-align: middle;
}

div + div img {
  box-shadow: 0 0 1px 0 white;
}

div + div + div img {
  box-shadow: 0 0 0 1px white;
  border: none;
}

<div>border only: <img src="//placehold.it/50/933/FFF"></div>
<div>border + box-shadow: <img src="//placehold.it/50/933/FFF">
<div>box-shadow only: <img src="//placehold.it/50/933/FFF">