我需要根据div
的尺寸改变div
的border-radius
- 但不能变成椭圆形,也不能形成药丸形状。例如,宽度,高度为 250,35 的div
应具有 7px
的border-radius
,而 280,70 之一的border-radius
应为 15px
- 始终为高度的 20%,但始终使用圆形舍入。在网站的另一部分,我需要边框半径等于min(width, height)/5
。没有 JavaScript 我怎么能做到这一点?
在所有情况下,宽度和高度都是任意的。我当前的解决方案是要求对不遵循默认大小的元素进行显式border-radius
,这不允许调整大小。
.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;
}
<div class="box one">yes</div>
<div class="box two">yes</div>
<div class="box three">no</div>
<div class="box four">no</div>
<div class="box five">no</div>
这里有 8 个边框半径值可以使用,因为角是省略号而不是圆(尽管它可以是):
MDN 链接
边框左上半径:1em 5em;
边框右上角半径:1em 5em;
边框右下半径:1em 5em;
边框左下半径:1em 5em;
从您的问题来看,该元素的比率似乎为 4:1,因此我们可以将其应用于边界半径
.box {
border-radius: 5%/20%;
}
.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;
}
<div class="box one">yes</div>
<div class="box two">yes</div>
<div class="box three">yes</div>
<div class="box four">yes</div>
简短的回答,你不能做min(width, height) / 5
,但使用 calc()
,就像在这个示例中一样,可能是一种在没有脚本的情况下尽可能接近你想要的东西的方法?
.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;
}
<div class="box one">yes</div>
<div class="box two">yes</div>
border-radius
可以缩短为
border-radius: calc(35px * 0.2);
border-radius: calc(70px * 0.2);