image - 圆形 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您正在使用的显示器。

Pixels per inch (PPI) or pixels per centimeter (PPCM) is a measurement of the pixel density (resolution) of an electronic image device, such as a computer monitor or television display, or image digitizing device such as a camera or image scanner. Horizontal and vertical density are usually the same, as most devices have square pixels, but differ on devices that have non-square pixels.

For example, a 15 inch (38 cm) display whose dimensions work out to 12 inches (30.48 cm) wide by 9 inches (22.86 cm) high, capable of a maximum 1024×768 (or XGA) pixel resolution, can display around 85 PPI in both the horizontal and vertical directions. This figure is determined by dividing the width (or height) of the display area in pixels by the width (or height) of the display area in inches. It is possible for a display to have different horizontal and vertical PPI measurements (e.g., a typical 4:3 ratio CRT monitor showing a 1280×1024 mode computer display at maximum size, which is a 5:4 ratio, not quite the same as 4:3). The apparent PPI of a monitor depends upon the screen resolution (that is, the number of pixels) and the size of the screen in use; a monitor in 800×600 mode has a lower PPI than does the same monitor in a 1024×768 or 1280×960 mode.

具有较高像素密度的显示器在视觉上往往会更好地平滑曲线。

您通常无法通过 HTML/CSS 或其他任何方式来改善像素密度显示。您只需学会接受显示器的质量或对其进行升级。

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