Question

我正在阅读Jon Duckett的 HTML和CSS ，并已被介绍到border-radius属性。

我正在尝试使用下面的代码创建一个圆圈，但圆圈并不完美。我使用的是50px的半径，但它并不完美。

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

<p class="three"></p>

我做错了什么？

Answer 1

padding并且border的宽度会另外计算到元素的width和height。

您有不同的选择来解决这个问题：

将box-sizing: border-box添加到您的元素，该元素定义了尺寸计算中应包含的内容
使用border-radius: 50%
将边框宽度和填充添加到border-radius。

这里的解决方案只有box-sizing

＆＃13;

p {
  display: inline-block;

  margin: 20px;
  width: 100px;
  height: 100px;

  /* these values get added to your 100px by default */
  border: 5px solid #ee3e80;
  padding: 10px;
}

p.three {
  padding: 0px;
  border-radius: 50px;
  
  /* now width and height determine how big your
     element is as a whole */
  box-sizing: border-box;
}

＆＃13;

<p class="three"></p>

＆＃13;

有关CSS框模型的更详细说明，请查看this article from MDN。

Answer 2

应该是50%，而不是50px。无论元素的大小如何，50%都会绘制一个圆圈。如果元素足够小，设置像素值将只绘制一个圆。

见下文。

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<p class="three"></p>

Answer 3

这是因为你没有考虑边界宽度的宽度，每边都是5px。因此总宽度为110px，因此您的边界半径必须为55px。完美圈子的简单方法是将border-radius设置为50%。

＆＃13;

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

＆＃13;

<p class="three"></p>

＆＃13;

Answer 4

您只需将50%添加到border-radius媒体资源即可。下面是一个片段，你会发现它是一个完美的圆圈。

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
}

p.three {
  padding: 0px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

<p class="three"></p>

Answer 5

另一种选择是将元素的box-sizing属性设置为border-box（就像我对几乎所有元素所做的那样）。

＆＃13;

p {
  border: 5px solid #ee3e80;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 20px;
  box-sizing: border-box; /* < -------------------- here */ 
}

p.three {
  padding: 0px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

＆＃13;

<p class="three"></p>

＆＃13;

Border-box在进行数学运算时会考虑边界，并且在全面应用时通常会简化布局和样式。像Bootstrap do this for you这样的库。

使用`border-radius`创建一个圆

5 个答案: