css - 为什么中间的边框比较厚？

Question

我正在尝试仅使用 CSS 和 HTML 创建一条曲线。由于某种原因，中间的线比两侧的线粗。为什么会这样？

HTML：

<div class="smile"></div>

CSS：

.smile{
    width: 150px;
    height: 80px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%; 
    border-bottom: 5px solid black;
}

Answer 1

它的厚度向中间增加，因为您已将border-widthdiv 的底部边框的属性指定为5px. 但是因为没有声明左右边框属性，所以边框必须平滑地渲染一条线，0px以便5px渲染为适当的圆角。因此厚度逐渐增加。