为什么边框半径不能使此<div>的顶部和底部完全圆形？

Question

这是范围滑块的手柄。我希望顶部和底部完全变圆，但是无论我将边框半径设置为什么，顶部和底部都不能完全变圆。它的末端为圆角，顶部略微扁平。这是怎么回事？

这是放大的图片和实际的CSS / HTML：

以及实际的CSS / HTML：

.handle {
	background-color: rgb(60, 158, 255);
	border-color: rgba(0, 0, 0, 0);
	border-radius: 5px;
	box-shadow: rgb(60, 158, 255) 0px 0px 0px 1px;
	height: 36px;
	left: 50%;
	margin-top: -11px;
	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	top: 50%;
	width: 5px;
}

<div class="handle"></div>

---

更新

我整理了一个演示程序，说明了我所看到的。它包括三种不同的尺寸，它们按比例放大了7倍。这不是像素舍入的事情。在您看到曲线开始之前，此放大版本具有约9px的平面。

请注意，偶数宽度的效果很好，而奇数的顶部和底部更平坦。它肯定比正方形更圆，但是不可否认的是它的形状有些扁平。

.handles {
	align-items: center;
	bottom: 0;
	display: flex;
	flex-direction: row;
	font-size: 7px;
	font-family: monospace, "Helvetica Neue", Helvetica, Georgia;
	font-weight: 400;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: scale(7);
}

.label {
	left: 50%;
	position: absolute;
	text-align: center;
	top: calc(100% + 6px);
	transform: translateX(-50%);
	width: 36px;
}

.handle {
	background-color: rgb(60, 158, 255);
	border-color: rgba(0, 0, 0, 0);
	border-radius: 5px;
	box-shadow: rgb(60, 158, 255) 0px 0px 0px 1px;
	height: 36px;
	margin: 0 12px;
	position: relative;
	width: 5px;
}


.handle--even4 {
	width: 4px;
}

.handle--even6 {
	width: 6px;
}

<div class="handles">
	<div class="handle handle--even4"><div class="label">4px</div></div>
	<div class="handle"><div class="label">5px</div></div>
	<div class="handle handle--even6"><div class="label">6px</div></div>
</div>

Answer 1

我相信它已经全面了。如果放大并检查每个像素的颜色值，则可以在顶部看到与侧面完全相同的过渡。

您的图像在顶部边缘的正中央有2个完全实心像素，这很典型。 （有时，像这样的曲线的最中心的1或2个像素渲染为完全实体，有时（不是某些渲染引擎的怪癖？），但它们总是非常接近实体。）

也许显示屏的对比度/伽玛值使中间的一些抗锯齿像素变暗以使您感知的曲线失真？这样一来，顶部边缘可能会出现4个完全实心的像素，而不是2个。这看起来像是平坦的顶部。检查其他显示，看看您是否更喜欢结果？不管它的价值是什么，它在我的屏幕上看起来已经很漂亮了（缩小时）。

（如果有其他迹象表明，该图像为14px宽，而不是CSS中指定的5px。即使它是高DPI，我也希望该图像为10px，而不是14px。无论如何，这没有什么害处如果需要，可以设置一个较高的半径值。）