形式上,border-radius属性的语法为每个角接受2个值：垂直半径和水平半径(用斜杠分隔).以下行将创建一个类似于上面第三个图像的椭圆边框半径.

border-radius: 5px/10px;

通常,我们只指定一个值.在这种情况下,该值被用作垂直和水平半径.以下行将创建一个类似于上面第二个图像的圆形边框半径.

border-radius: 10px;

使用百分比

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS data types. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

当我们使用像素或ems这样的绝对长度单位时,使用单个值来创建圆形半径很好,但是当我们使用百分比时会变得更复杂.由于此属性的单值使用与使用相同值两次同义,因此以下两行是等效的;但是,这些不一定会产生圆形边界半径.

border-radius: 50%;

border-radius: 50%/50%;

这些线表示“创建一个椭圆或圆,其垂直半径等于元素高度的50％,其水平半径等于元素宽度的50％,并将其用作边界半径.”.如果元素宽200像素,高100像素,则会产生椭圆而不是圆形.

解

如果你想要一个圆形的边界半径,最简单的方法是使用绝对测量单位(如像素或ems或除百分比之外的任何东西),但有时候这不适合你的用例并且你想使用百分比.如果您知道包含元素的纵横比,您仍然可以！在下面的例子中,由于我的元素宽度是它的两倍,我将水平半径缩放了一半.

#rect {

width: 200px;

height: 100px;

background: #000;

border-radius: 25%/50%;

}