html - 为什么我不能用 border-radius 做一个圆圈？

Question

* {
  margin: 0;
}

div {
  background-color: green;
  height: 900px;
  width: 50%;
  margin: auto;
  border-radius: 50px;
  overflow: hidden;
  padding: 20px;
  border: 4px solid red;
  box-sizing: border-box;
}

div:hover {
  box-shadow: 5px 5px 5px 1px blue;
}

@media screen and (max-width:600px) {
  div {
    background-color: aqua;
    color: red;
    width: 100%;
    height: 10%;
  }
  body {
    background-color: chocolate
  }
}

.divas {
  background-color: yellow;
  position: relative;
  margin-top: 20%;
  height: 300px;
  border-radius: 50%;
}

<div>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . </div>
<div class="divas"></div>

你好，我想做一个完美的圆形。我尝试用 border-radius 创建它，但它不允许我创建一个完美的圆。有人可以向我解释为什么吗？我尝试更改填充等，但它仍然不起作用。？提前致谢。

Answer 1

如果你想用 border-radius 创建圆，那么你要应用 border-radius 的 div 的高度和宽度应该相同

那么只有 border-radius 看起来像圆

例子

#circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
}

<div id="circle"></div>