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

Posted 2023-03-06

【中文标题】CSS - 圆形边框看起来太像素化

【英文标题】：CSS - Rounded border looks too pixelated

【发布时间】：2016-07-29 02:46:59

【问题描述】：

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

这是它的图片：

这是我的 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;

【问题讨论】：

This 帖子可能正是您正在寻找解决问题的方法。

@Alex 它看起来更好，但在我的小尺寸（50x50px 图像）中仍然有点像素化。

好吧，不确定你会期望什么。这是一个高对比度边框（非常深蓝色上的白色），只有 1 个像素宽。浏览器有限制，抗锯齿（尽管存在）并不总是适合每种场景的理想模糊级别。我建议降低对比度以使其看起来不那么像素化。

【参考方案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% 成功的。

【参考方案2】：

你绝对没有做错什么。

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

【参考方案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" > 
</div>

【讨论】：

这无疑带来了最显着的改进，尤其是对于较小的图像。

【参考方案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;

【讨论】：

0 票，但这就像一个魅力。 1px 边框被像素化，切换到 box-shadow 就像黄油一样平滑。

【参考方案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">

【讨论】：

我的 Chrome (Ubuntu 17.10) 将它们全部渲染为像素化，圣牛！