Css 边界半径：50%产生锯齿形圆；为什么不是完美圆？

我找到了其他标题类似的线程，但在这些线程中找不到适合我的解决方案

我正试图通过将相同的宽度/高度与边界半径（50%）相结合来生成完美的圆形输入标签，但边缘是像素化的。我尝试了不同的像素值（偶数和奇数）的宽度/高度，但问题仍然存在

---

如何使圆变得完美？

添加此

边框：0#移动选择按钮标签中的code>CSS属性

，并选中：）

据我所知，您想要的是反锯齿形状。 您可以使用

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

检查一下

---

是浏览器对alpha值的支持。

删除

边框：1px solid#d3在下面的类中

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

我看到完美的圆形，没有像素干扰
 在检查css时，jQuery UI似乎已经为
圆圈
设置了一个
灰色边框

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

这是造成锯齿状圆圈的原因。将所有圆元素的
边框重置为
0

尽管如此，边缘（边框）还是会有些粗糙。尝试添加浏览器的前缀属性，如

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

如果你想要一个完美的圆圈，svg或图像将是更好的选择
定义“完美”。）在任何基于像素的屏幕上，它永远不会是一个完美的圆圈。在你的例子中，圆圈看起来不错，但是额外的边框使它有点模糊。谢谢你的评论，保罗。正如stanze让我尝试的那样，添加边界：0确实做到了！那是因为我实现了stanze的解决方案！