对矩形div使用边框半径CSS会产生椭圆角而不是圆角。我怎样才能为矩形div得到完美的圆角呢？
uidvcgyl1#
（来源：mozilla.org）形式上，border-radius属性的语法为每个角接受2个值：水平半径和垂直半径（由斜线分隔）。下面的行将创建一个椭圆边界半径，类似于上面的第三个图像。
border-radius: 10px / 5px;
通常，我们只指定一个值。在这种情况下，这个值同时用作垂直半径和水平半径。下一行将创建一个圆形边界半径，类似于上面的第二个图像。
border-radius: 10px;
使用百分比
Mozilla Developer's Network为此属性定义了可能的值类型，如下所示：
表示圆半径或椭圆的长半轴和短半轴的大小。可以用CSS数据类型允许的任何单位表示。负值无效。
使用百分比值表示圆半径的大小或椭圆的长半轴和短半轴。* 水平轴的百分比指的是框的宽度，垂直轴的百分比指的是框的高度。* 负值无效。当我们使用绝对length单位（如像素或ems）时，使用单个值创建圆半径是很好的，但当我们使用百分比时会变得更加复杂。由于此属性的单值用法与使用相同的值两次是同义的，因此下面两行是等效的：然而，这些将不一定产生圆形边界半径。
length
border-radius: 50%; border-radius: 50%/50%;
这些行表示“创建一个垂直半径等于元素高度的50%、水平半径等于元素宽度的50%的椭圆或圆，并将其用作border-radius。"如果元素宽200像素、高100像素，则将生成椭圆而不是圆。
解决方案
如果你想要一个圆形的边界半径，最简单的方法就是使用绝对测量单位（像像素或ems或除百分比以外的任何东西），但有时候这并不适合你的用例，你想使用百分比。如果你知道包含元素的长宽比，你仍然可以！在下面的例子中，因为我的元素是它的高度的两倍宽，我把水平半径缩小了一半。一个三个三个一个另一种选择是提供一个足够大的像素值或任何其他绝对测量单位。如果该值超过最短边长度的一半，浏览器将使用最小值作为其两个方向的边界半径，从而在矩形元素上产生完美的药丸形状。
#rect { width: 200px; height: 100px; background: #000; border-radius: 100000000000000px; }
<div id="rect"></div>
4xrmg8kj2#
border-radius: 9999px确实产生了“完美的1/4圆”角，这就是为什么你可以用这个属性来制作css圆。它们有时看起来不像是完美的圆角，但这是一种视错觉。如果你对此感到困扰，你可以尝试用border-radius: 9px / 8px来模仿这种效果另一方面，如果div不是正方形，border-radius: 50%将产生非圆弧。同样，您可以通过为x轴和y轴指定单独的半径（如border-radius: 10% / 20%）来覆盖您不喜欢的行为。
border-radius: 9999px
border-radius: 9px / 8px
border-radius: 50%
border-radius: 10% / 20%
kknvjkwl3#
如果你使用百分比，它可能会导致拉伸/椭圆外观。你可能想尝试指定单位为像素，以获得更多的自定义圆形外观。
wmtdaxz34#
只需使用vw/vh定义半径（至少对我有效）：
button{ border-radius:1vh; }
这是因为vh / vw对于视口始终是恒定的，并且与元素无关：）
x6492ojm5#
补充一下开尔文的答案，要想在矩形上得到完美的圆角，可以尝试：
button { border-radius: 50vh; }
s8vozzvw6#
另一个影响边界半径的因素是，具有讽刺意味的是，边界....如果您有一个顶部边界，而两侧没有边界，您将看到与使用基于百分比的半径时相同的不平衡边界圆角效果。我可以看到这是一个有用的特性。但是请，请，在你的CSS中添加一个注解，告诉未来的你（或其他人）你为什么要这样做。调试这个是痛苦的！
xxls0lw87#
style={{ height: "150px", width: "150px", borderRadius: "50%", boxSizing: "border-box", overflow: "hidden" }}
这是什么，解除了我从恼人的椭圆形问题。
rt4zxlrg8#
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 50px; border: 1px solid black; aspect-ratio: 1; resize: both; overflow: auto; } </style> </head> <body> <div class="box"></div> <script> const ro = new ResizeObserver(entries => { for (let entry of entries) { entry.target.style.borderRadius = entry.target.style.width; } }); ro.observe(document.querySelector('.box')); </script> </body> </html>
8条答案
按热度按时间uidvcgyl1#
（来源：mozilla.org）
形式上，border-radius属性的语法为每个角接受2个值：水平半径和垂直半径（由斜线分隔）。下面的行将创建一个椭圆边界半径，类似于上面的第三个图像。
通常，我们只指定一个值。在这种情况下，这个值同时用作垂直半径和水平半径。下一行将创建一个圆形边界半径，类似于上面的第二个图像。
使用百分比
Mozilla Developer's Network为此属性定义了可能的值类型，如下所示：
表示圆半径或椭圆的长半轴和短半轴的大小。可以用CSS数据类型允许的任何单位表示。负值无效。
使用百分比值表示圆半径的大小或椭圆的长半轴和短半轴。* 水平轴的百分比指的是框的宽度，垂直轴的百分比指的是框的高度。* 负值无效。
当我们使用绝对
length单位（如像素或ems）时，使用单个值创建圆半径是很好的，但当我们使用百分比时会变得更加复杂。由于此属性的单值用法与使用相同的值两次是同义的，因此下面两行是等效的：然而，这些将不一定产生圆形边界半径。这些行表示“创建一个垂直半径等于元素高度的50%、水平半径等于元素宽度的50%的椭圆或圆，并将其用作border-radius。"如果元素宽200像素、高100像素，则将生成椭圆而不是圆。
解决方案
如果你想要一个圆形的边界半径，最简单的方法就是使用绝对测量单位（像像素或ems或除百分比以外的任何东西），但有时候这并不适合你的用例，你想使用百分比。如果你知道包含元素的长宽比，你仍然可以！在下面的例子中，因为我的元素是它的高度的两倍宽，我把水平半径缩小了一半。
一个三个三个一个
另一种选择是提供一个足够大的像素值或任何其他绝对测量单位。如果该值超过最短边长度的一半，浏览器将使用最小值作为其两个方向的边界半径，从而在矩形元素上产生完美的药丸形状。
4xrmg8kj2#
border-radius: 9999px确实产生了“完美的1/4圆”角，这就是为什么你可以用这个属性来制作css圆。它们有时看起来不像是完美的圆角，但这是一种视错觉。如果你对此感到困扰，你可以尝试用border-radius: 9px / 8px来模仿这种效果另一方面，如果div不是正方形，
border-radius: 50%将产生非圆弧。同样，您可以通过为x轴和y轴指定单独的半径（如border-radius: 10% / 20%）来覆盖您不喜欢的行为。kknvjkwl3#
如果你使用百分比，它可能会导致拉伸/椭圆外观。你可能想尝试指定单位为像素，以获得更多的自定义圆形外观。
wmtdaxz34#
只需使用vw/vh定义半径（至少对我有效）：
这是因为vh / vw对于视口始终是恒定的，并且与元素无关：）
x6492ojm5#
补充一下开尔文的答案，要想在矩形上得到完美的圆角，可以尝试：
s8vozzvw6#
另一个影响边界半径的因素是，具有讽刺意味的是，边界....如果您有一个顶部边界，而两侧没有边界，您将看到与使用基于百分比的半径时相同的不平衡边界圆角效果。
我可以看到这是一个有用的特性。但是请，请，在你的CSS中添加一个注解，告诉未来的你（或其他人）你为什么要这样做。调试这个是痛苦的！
xxls0lw87#
这是什么，解除了我从恼人的椭圆形问题。
rt4zxlrg8#