为什么设置border-radius的元素使用border-top时无平直边缘且形态异常？

初始实现异常的根本原因 #

这是CSS边框的默认渲染规则导致的：

• 元素的四个边框在角落处是斜接分割的，正常四个边框都存在宽度时，每个边框的两端会被切割在元素的对角线上，对应圆形元素（border-radius:50%）的每个边框刚好占据1/4周长。
• 你只设置了border-top有宽度，其余三个边框的默认宽度为0，此时浏览器不会为不存在的边框预留斜接空间，上边框的左右两端会直接延伸到元素左右两侧的中点位置，最终视觉上就占据了接近一半的周长，边缘也会出现斜切的怪异形态。

全透明边框的修复逻辑 #

当你添加border: 5px solid transparent后，四个边框都拥有了相同的宽度，即使其余三个边框是透明不可见的，浏览器依然会按照完整边框的规则进行斜接分割，上边框的两端会被限制在对角线位置，自然就呈现出仅占1/4周长、边缘平直的预期效果。

你可以做个简单的验证：给四个边框分别设置不同的实色，就能直观看到每个边框的边界刚好对齐对角线，各自占1/4的圆形周长。

内容的提问来源于stack exchange，提问作者Marten