html - 当应用相等的宽度和高度时，这个 CSS 如何产生一个圆圈？

Question

这个CSS如何产生一个完全应用相等宽度/高度的一半的圆？

div{
    width: 200px; 
    height: 200px; 
    border-radius: 100px; 
    background-color: red;
}

Answer 1

阅读此解释，一切都会清楚:)

这个怎么运作

可以使用四个单独的border-*-radius 属性（border-bottom-left-radius、border-top-left-radius 等）独立创建圆角，也可以使用border-radius 速记属性同时创建所有四个角。

Answer 2

这是因为你的边界半径。您将其设置为 100 像素，恰好是原始正方形的一半，因此它将变成一个圆形。尝试做：

div{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: red;
}