以百分比表示的边界半径 [重复]答案

【问题标题】：Border radius in percentage [duplicate]以百分比表示的边界半径 [重复]
【发布时间】：2016-10-05 03:37:49
【问题描述】：

在 CSS 中允许写这样的东西。

#div-with-border {
  width: 100%;   // scales with parent wrapper
  height: 30%;   // scales with parent wrapper

  border: 1px solid black;
  border-radius: 10%;
}

如果#div-width-border 不是一个完美的正方形，则边框不会是圆形，因为这意味着边框半径使用了 10% 的宽度和 10% 的高度（它们不同）。我想得到完美的圆圈...我不能使用px，因为边框半径取决于高度/宽度。

我确信#div-width-border 的宽度总是大于元素的高度。我需要一个大小为100% of element height 的边界半径来获得一个完美的圆，但只是100% 不会这样做，因为它将使用元素宽度来计算半径的一部分。

【问题讨论】：

你试过50%吗？
@jonrsharpe 我在这里的情况不同，因为 div 不是一个完美的正方形，我需要百分比来使边框成为一个独立于 div 宽度/高度的圆圈。
这不是你写的问题；请edit.
@jonrsharpe 这正是我所写的。 “我不能使用px...”、“如果#div-width-border不是一个完美的正方形...”等
不是。您提到 10% 和 100%，两者都没有任何意义；您的大部分问题基本上是红鲱鱼尝试 “如何将非方形 div 裁剪成圆形？我知道如果 div 是正方形，您可以使用border-radius: 50%;，但我的不是。它也随其父级的大小，所以我不能使用绝对 px 大小。”

标签： html css percentage

【解决方案1】：

如果您知道宽度和高度之间的比例，您可以使用 Slash-Annotation 为水平和垂直边界半径指定不同的 % 值。下面是一个例子：

.wrapper {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.div-with-border {
  width: 100%;
  height: 25%;
  background-color: blue;
  border: 1px solid black;
  border-radius: 10% / 40%;
}

<div class="wrapper">
  <div class="div-with-border"></div>
</div>

【讨论】：

你是救生员。我不知道斜线注释是一回事。

【解决方案2】：

你试过border-radius: 50%; 吗？既然你说 div 是一个完美的正方形，那么将边框半径设置为 50% 应该可以工作

【讨论】：

对不起，我的意思是如果 div 不是一个完美的正方形。编辑..
div 内的信息将被裁剪，因为您希望它是圆形的。 div 的形状应为正方形，以将其转换为完美的圆形。您应该考虑添加填充以避免 div 内容的裁剪或溢出。如果您的 div 具有溢出属性，可以吗？否则 div 将呈椭圆形，因为宽度大于高度。
@hulking 我的意思是，边界形成了一个完美的圆圈。就像this：当然不是div。
是的，没关系，我的意思是，您需要在 div 内有填充以减小内容的宽度，以便宽度与高度的尺寸相匹配以创建圆形 div .