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

您绝对没有做错任何事情。

也许只是因为边界太薄。尝试更改border: 1px solid white;为2px，3px或任何您喜欢的颜色。试试看。

Answer 2

对我来说这看起来最好：

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

这最终取决于您使用的监视器的像素密度。

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

例如，一个15英寸（38厘米）的显示器尺寸为12英寸（30.48厘米）宽，9英寸（22.86厘米）高，最大分辨率为1024×768（或XGA），可以显示约85英寸水平和垂直方向的PPI。通过以像素为单位的显示区域的宽度（或高度）除以以英寸为单位的显示区域的宽度（或高度）来确定此图。显示器可能具有不同的水平和垂直PPI测量值（例如，典型的4：3比例的CRT显示器以最大尺寸显示1280×1024模式的计算机显示器，该比例为5：4，与以下尺寸不太相同） 4：3）。监视器的视在PPI取决于屏幕分辨率（即像素数）和使用中的屏幕大小。

具有较高像素密度的监视器将趋于在视觉上更好地平滑曲线。

通常，由于通过HTML / CSS改善像素密度显示或什至没有其他任何事情，您通常无法采取任何措施。您只需要学会适应显示器的质量或对其进行升级即可。

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