html – 避免CSS border-radius中的椭圆形状

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

border-radius: 5px/10px;

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

border-radius: 10px;

使用百分比

Mozilla Developer’s Network定义了此属性的可能值类型,如下所示：

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

border-radius: 50%;
border-radius: 50%/50%;

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

解

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

#rect {
  width: 200px;
  height: 100px;
  BACkground: #000;
  border-radius: 25%/50%;
}

<div id="rect"></div>