Html 边界半径不是预期的圆形

在上面的例子中，我试过切换框样式，也试过em值，当我根据它们的父项编写字体大小16px时，根据veiwport，当更改切换框圆圈时，字体大小会发生变化，这并不完美，因为特定的字体大小是合适的（例如：父项字体大小20px，22px）

这是密码

.parent{
字体大小：16px；
文本对齐：居中；
利润上限：10px
}
.BP_swtchbox{
显示：内联块；
字号：1em
}
.BP_Swtch{
光标：指针；
背景：#d7d9dd；
边界半径：0.313em；
高度：0.625em；
宽度：1.500em；
显示：内联块；
位置：相对位置；
过渡：.4s；
-ms转换：.4s；
-moz跃迁：.4s；
-webkit转换：.4s
}
.BP_swtchbox输入{
显示：无
}
.BP_Swtbx_lb{
背景：#fff；
边界半径：50%；
盒影：0 1px4p0#777；
高度：0.875em；
宽度：0.875em；
位置：绝对位置；
排名：0；
左：0；
过渡：.3s立方贝塞尔（.4,1.3,65,1.1）；
-ms转换：.3s立方贝塞尔（.4,1.3,65,1.1）；
-莫兹变换：.3s立方贝塞尔（.4,1.3,65,1.1）；
-webkit转换：.3s立方贝塞尔（.4,1.3,65,1.1）；
底部：0；
保证金：自动
}
.BP_开关盒输入：选中+.BP_开关盒{
长方体阴影：0.375em#58b14c插图
}
.BP_swtchbox输入：选中+.BP_Swtch.BP_Swtbx_lb{
左：钙（100%-0.875em）；
左：-ms计算值（100%-0.875em）；
左图：-moz计算值（100%-0.875em）；
左：-webkit计算（100%-0.875em）
}

---

这很有趣。当

.parent

的

字体大小
为
20px
时，
的
宽度
和
高度
.BP_-Swtbx_-lb
（均表示为
0.875em
）计算为17.5像素。因为像素不能是分数，所以它们被舍入，但奇怪的是，高度被舍入到17，而宽度被舍入到18

当
.parent
的
字体大小
为
22px
时，似乎正好相反，
高度
向上取整，
宽度
向下取整。在这种情况下，它们都应该明确地向下舍入，因为它被计算为19.25像素

这种奇怪的形状似乎是由从非舍入值而不是舍入值计算的曲线引起的。将设置非舍入值时的形状与显式设置舍入值时的形状进行比较，前者稍微呈矩形，后者则完全呈椭圆形。因此，渲染曲线和渲染尺寸之间存在不一致

这似乎只是Chrome的情况。Safari和Firefox都没有显示这种行为。

现在，取决于浏览器实现如何舍入分数像素，但您可能认为它至少在内部是一致的。我愿意得出结论，这是一个浏览器错误，应该向谷歌Chrome开发团队报告。
从您发布的代码笔来看，这个圆圈似乎很完美。将
.BP_swtchbox
的字体大小更改为6em，以使滑块变大，并且看起来很好，无法复制。你确定你看到的不是一个宽度/高度稍有不同的跨度吗？很完美，如果是的话，你可以再看一次吗？没有必要再问了。与其使用边界半径的百分比，不如尝试使用px值。使用像素表示跨度的高度和宽度。BP_Swtbx_lb也表示边界半径，然后再试一次，希望这能有所帮助。谢谢你的反馈