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

【问题标题】：Creating a circle using `border-radius`使用`border-radius`创建一个圆
【发布时间】：2018-01-17 19:10:02
【问题描述】：

我正在阅读 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;
}

&lt;p class="three"&gt;&lt;/p&gt;

我做错了什么？

【问题讨论】：

您不应该为 border-radius 属性使用供应商前缀，因为它们适用于非常旧的浏览器（Firefox 4-、Chrome 4-、Safari 5-）。

标签： html css

【解决方案1】：

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

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

这里是box-sizing的解决方案

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

&lt;p class="three"&gt;&lt;/p&gt;

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

【讨论】：

【解决方案2】：

这是因为您没有考虑来自边框宽度的宽度，即两端为5px。所以总宽度是110px，所以你的边框半径需要是55px。一个更简单的完美圆的方法是将border-radius 设置为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%;
}

&lt;p class="three"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

应该是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%;
}

&lt;p class="three"&gt;&lt;/p&gt;

【讨论】：

【解决方案4】：

您只需将50% 添加到border-radius 属性。下面是一个sn-p，你会发现它是一个完美的圆。

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%;
}

&lt;p class="three"&gt;&lt;/p&gt;

【讨论】：

像素值没有理由不工作。这并不能解释实际问题。

【解决方案5】：

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

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

&lt;p class="three"&gt;&lt;/p&gt;

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

【讨论】：