当应用相同的宽度和高度时，该CSS如何生成一个圆？[副本]

Question

这个CSS如何精确地应用相同宽度/高度的一半来生成一个圆？

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

Answer 1

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

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

Answer 2

阅读这个解释，一切都会清楚：）

工作原理

可以使用四个单独的边界半径属性（边界左下半径、边界左上半径等）单独创建圆角，也可以使用边界半径速记属性同时为所有四个角创建圆角。