Question

我需要border-radius的{{1}}根据div的尺寸进行更改 - 但不要变成椭圆形，或形成药丸形状。例如，宽度为250,35的div应为div border-radius，而其中280,70应为7px border-radius 1}} - 总是高度的20％，但总是使用圆形圆角。在网站的另一部分，我需要边界半径等于15px。如何在没有JavaScript的情况下实现这一目标？

在所有情况下，宽度和高度都是任意的。我目前的解决方案是要求明确的min(width, height)/5元素不遵循默认大小，这不允许调整大小。

＆＃13;

border-radius

＆＃13;

.box {
  width: 250px;
  height: 35px;
  border-radius: 7px;
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
  border-radius: 14px;
  line-height: 70px;
}
.three {
  border-radius: 20%;
}
.four {
  border-radius: 999px;
}
.five {
  /* calculated from initial values, note that they are wrong with the larger size */
  border-radius: 2.8%/20%;
  width: 280px;
  height: 70px;
  line-height: 70px;
}

＆＃13;

Answer 1

此处使用8个border-radius值，因为角是省略号而不是圆圈（虽然可以）：

MDN Link

border-top-left-radius：1em 5em;

border-top-right-radius：1em 5em;

border-bottom-right-radius：1em 5em;

border-bottom-left-radius：1em 5em;

根据您的问题判断该元素的比例为4：1，因此我们可以将其应用于border-radius

.box {
  border-radius: 5%/20%;
}

＆＃13;

.box {
  width: 250px;
  height: 35px;
  border-radius: 5%/20%;
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
}
.three {
  width: 300px;
  height: 75px;
}
.four {
  width: 400px;
  height: 100px;
}

＆＃13;

<div class="box one">yes</div>
<div class="box two">yes</div>

<div class="box three">yes</div>
<div class="box four">yes</div>

＆＃13;

Answer 2

简短的回答，你不能min(width, height) / 5，但使用calc()，就像在这个示例中一样，可能是一种尽可能接近你想要的方式而无需脚本的方法吗？ / p>

＆＃13;

.box {
  width: 250px;
  height: 35px;
  border-radius: calc(35px * 0.2) / calc(35px * 0.2);
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
  border-radius: calc(70px * 0.2) / calc(70px * 0.2);
  line-height: 70px;
}

＆＃13;

<div class="box one">yes</div>
<div class="box two">yes</div>

＆＃13;

border-radius可以缩短为

的地方

  border-radius: calc(35px * 0.2);

  border-radius: calc(70px * 0.2);

单半径`border-radius`占特定边的百分比

2 个答案: