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

这最终取决于您正在使用的监视器的pixel density。

每英寸像素数（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取决于屏幕分辨率（即像素数）和使用中屏幕的大小;在1024×600模式下，显示器的PPI值低于1024×768或1280×960模式下的同一显示器。

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

由于通过HTML / CSS改善像素密度显示，或者真的，任何东西，你真的没什么可以做的。您只需学会使用显示器的质量或升级它。

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

Answer 3

不幸的是我多次遇到同样的问题。我认为这可能是一个无法100％解决的渲染问题。也许你可以使用我用于我的＆＃34;边界问题＆＃34;使它看起来更清晰（我没有在每个浏览器上测试它，所以你可能需要检查它）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

通常当我遇到这个问题时，我只是减少颜色的对比度，以帮助缓解像素化的抗锯齿（正如我在评论中提到的）。然而，这并不总是一种选择。您面临的真正问题是浏览器将应用一定量的抗锯齿以防止完全锯齿，并且您实际上无法控制所应用的抗锯齿的强度。这是您可以用来帮助控制外观的替代方案。您可以使用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">

Answer 5

对我而言，这看起来最好：

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

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

5 个答案: