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

Question

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

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

Answer 1

阅读this explanation，一切都将清楚：）

  

工作原理

     

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

Answer 2

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

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