Question

我发现其他帖子的标题相似，但我找不到适合我的解决方案。

我试图通过将相等的宽度/高度与border-radius：50％组合来生成完美圆形的输入标签，但边缘会出现像素化。我已经尝试了宽度/高度的各种像素值（偶数和奇数），但问题仍然存在。

如何让圆圈完美？

Answer 1

在此border: 0;中添加此#mobile-choice-buttons label CSS属性，然后检查：）

Answer 2

据我所知，你想要的是对形状进行反锯齿。您可以使用rgba(255, 255, 255, 0)作为边框，而不是透明。这又是透明的。但是alpha=0会产生平滑的边缘。

#circle { 
       width: 140px;
       height: 140px;
       background: blue; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
       border: 0px solid rgba(255, 255, 255, 0); 
    }

检查fiddle。

this是浏览器对alpha值的支持。

Answer 3

删除以下类中的border: 1px solid #d3d3d3;。

ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  /* border: 1px solid #d3d3d3; */

我看到没有像素分心的完美圆圈。

Answer 4

在检查你的css时，似乎jQuery UI已经为grey border提供了circle。

.ui-state-default, 
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { /* CSS */ }

负责锯齿状的圆圈。将所有圆元素的borders重置为0。

边缘（边框）仍然有些杂乱无章。尝试添加浏览器的前缀属性，如

-webkit-border-radius
-moz-border-radius

如果你想要一个完美的圆圈，svg或图像将是更好的选择

边界半径：50％产生锯齿状圆圈;为什么不完美的圈子？

4 个答案: