边界半径百分比(%)和像素(px)或em

Question

如果我对border-radius 使用像素或em值,则边缘半径始终为圆弧或药丸形状,即使该值大于元素的最大边.

当我使用百分比时,边缘半径是椭圆形的,从元素每边的中间开始,形成椭圆形或椭圆形:

border-radius的像素值:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

border-radius的百分比值:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

为什么边界半径百分比的作用方式与使用像素值或em值设置的border-radius的作用方式相同？

Answer 1

边界半径:

首先,您需要了解border-radius属性需要2个值.这些值是定义拐角形状的四分之一椭圆的X/Y轴上的半径.
如果仅设置了一个值,则第二个值等于第一个值.所以border-radius: x相当于border-radius:x/x;.

百分比值

参考W3C规范:CSS背景和边框模块级别3 border-radius属性这是我们可以阅读的有关百分比值的内容:

百分比:请参阅边框的相应尺寸.

因此border-radius:50%;,通过这种方式定义椭圆的raddi:

• X轴上的半径是容器宽度的 50%
• Y轴上的半径是容器高度的 50%

像素和其他单位

使用边框半径百分比以外的一个值(em,in,视口相关单位,cm ...)将始终生成具有相同X/Y半径的椭圆.换句话说,一个圆圈.

当你设置border-radius:999px;圆的半径应该是999px.但是当曲线重叠时应用另一个规则,将圆的半径减小到最小边的一半.所以在你的例子中,它等于元素高度的一半:50px.

对于此示例(使用固定大小的元素),您可以使用px和百分比获得相同的结果.作为元素是230px x 100px,border-radius: 50%;相当于border-radius:115px/50px;(两侧的50%):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Answer 2

一种让它正确缩放到视口大小，但在没有任何 js 的情况下保持圆角的方法是：

border-radius: 3vmin;

那么它总是会缩放到最小尺寸，所以你永远不会有一个带有半圆形边的盒子，并且你不需要任何js来计算正确的百分比。

编辑：抱歉，忘记了vmin存在，所以将其更改为使用它。

Answer 3

只需将第一个值除以所需的百分比即可。如果您希望边界半径为50％，请输入：

border-radius: 25%/50%; 

或另一个例子：

border-radius: 15%/30%;

您可以轻松地在js或SASS中进行数学运算。