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

如果要创建具有边界半径的圆，则高度和宽度应与要应用边界半径的div相同

然后只有边框半径看起来像圆形

Answer 2

对于一个完美的圆，您需要一个具有相同高度和宽度的元素。您还只定义了border-radius:50px而不是border-radius:50%。

* {
  margin: 0;
}

div {
  background-color: green;
  height: 500px;
  width: 500px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
 padding: 25px 28px 28px;
  text-align: center;
  border: 4px solid red;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 60px;
}

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;
  width: 300px;
  border-radius: 50%;
}

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

Answer 3

用于在CSS对象中创建圆应具有相同的宽度和高度增加宽度：300px;到.divas类。

Answer 4

您需要使用border-radius: 100%并且高度和宽度相等。

Answer 5

高度和宽度相同的div

边界半径是宽度的一半，给出一个圆。

.mycircle {
    background-color: green;
    height: 200px;
    width: 200px;
    border-radius: 100px;
}

<div class="mycircle"></div>

Answer 6

要制作一个完美的圆，您需要将宽度和高度设置为相等。如果使用CSS，则需要在“ px”（而不是“％”）中定义它们，因为窗口的宽度和高度可能因设备而异。现在将边界半径设置为50％。下面是CSS：

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

如果您的with取决于窗口的宽度（如您所使用的％），则可以使用javascript将高度设置为等于宽度。这是方法。

HTML

<div></div>

JavaScript

var requiredWidth = window.innerWidth * (0.5); //window width excluding scrollbar.
var div = document.querySelector('div');
div.style.width = requiredWidth + 'px';
div.style.height = requiredWidth + 'px';

现在您已经使用javascript定义了高度和宽度，请在CSS中将border-radius设置为50％。

CSS

div {
  border-radius: 50%;
  background-color: red;
}

Answer 7

您要创建一个具有边框半径的圆，然后高度和宽度应与您要应用的元素border-radius:100%

相同

* {
  margin: 0;
}

div {
  background-color: green;
  height: 600px;
  width: 600px;
  margin: auto;
  border-radius: 100%;
  overflow: hidden;
  padding: 90px;
  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;
  width: 300px;
  border-radius: 100%;
}

<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>

为什么不能用边界半径做一个圆？

7 个答案: