50px 边框半径在 Firefox 中看起来已经破裂答案

【问题标题】：50px border radius looks cracked in Firefox50px 边框半径在 Firefox 中看起来已经破裂
【发布时间】：2017-04-03 11:34:34
【问题描述】：

我正在使用border-radius: 50px; 制作圆形边框。它在 Chrome 和其他一些浏览器中可以完美运行，但在 Firefox 中看起来会破解：

这是它在 Chrome 中的外观：

这是我的代码：

li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    border: 2px solid #FFF;
    cursor: pointer;
    display: inline-block;
    height: 50px;
    margin: 0px 5px;
    width: 50px;
    transition: all 0.3s ease-in-out 0s;
    color: #FFF;
    line-height: 47px;
    font-size: 20px;
    border-radius: 50px;
}

fiddle

【问题讨论】：

1) 您不需要将边框半径设置为 50%。您也可以将其设置为一个可笑的高数值，例如 500 像素。 2) 不只是边框看起来不好。看你管的标志。在 FF 中很难辨认。这可能是您使用的抗锯齿设置的问题吗？您是否在图像中使用字符图标？
一些渲染问题，我发现 chrome 在 2 个月前也发生了同样的事情。
@Ideogram 图标来自 font awesome。当我给半径 50px 时也会发生同样的情况
您是否确实在 CSS 中包含了抗锯齿设置？这不仅仅是使用抗锯齿，还需要选择正确的设置。这是 icomoon 应用程序的建议：>>> -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
如果我将边框宽度增加 1px 就完美了。但这会给其他浏览器带来问题

标签： html google-chrome firefox css

【解决方案1】：

如果你使用：Font-Awesome

HTML：

<a href="#"><i class="fa fa-youtube"></i></a>

CSS：

body {background: #000;}
a {display:block; width: 50px; height:50px; border-radius:50%; color:#fff; border:1px solid #fff; text-align:center; line-height:50px;}
a i {font-size:25px; line-height: 50px;}

JS Fiddle Demo

【讨论】：

添加边框大小 :) 边框：2px solid #fff;