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

Question

对矩形div使用Border-radius CSS会产生椭圆角而不是圆角.如何为矩形div获得完美的圆角？

Answer 1

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

border-radius: 5px/10px;

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

border-radius: 10px;

使用百分比

在Mozilla开发的网络定义可能的值类型此属性如下:

<length>
表示圆弧半径的大小或省略号的半长轴和半短轴.它可以用CSS数据类型允许的任何单位表示.负值无效.

<percentage>
使用百分比值表示圆弧半径的大小,或省略号的半长轴和半短轴.水平轴的百分比是指盒子的宽度,垂直轴的百分比是指盒子的高度.负值无效.

当我们使用length像素或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>

Answer 2

border-radius: 9999px确实会产生“完美的 1/4 圆”角，这就是您可以使用此属性制作 css 圆的原因。它们有时看起来不像是完美的圆角，但这是一种视觉错觉。如果这困扰您，您可以尝试使用类似的东西来模仿效果border-radius: 9px / 8px

border-radius: 50%另一方面，如果您的 div 不是正方形，则会产生非圆弧。同样，您可以通过为 x 和 y 轴指定单独的半径来覆盖您不喜欢的行为，例如border-radius: 10% / 20%。

Answer 3

如果您使用百分比，则可能会导致拉伸/椭圆形外观。您可能想尝试以 px 为单位指定单位，以获得更多自定义圆形外观。