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

Question

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

Answer 1

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

border-radius: 5px/10px;

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

border-radius: 10px;

使用百分比

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

  

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

     

<强>＆LT;百分比＆GT;
    使用百分比值表示圆半径的大小，或省略号的半长轴和半短轴。 水平轴的百分比是指盒子的宽度，垂直轴的百分比是指盒子的高度。负值无效。

当我们使用绝对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

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

Answer 3

border-radius: 9999px会产生“完美的1/4圈”角，这就是为什么你可以用这个属性制作CSS圈。它们有时看起来不像是圆角，但这是一种视错觉。如果这让您感到困扰，可以尝试使用border-radius: 9px / 8px

等模仿效果 另一方面，如果你的div不是正方形，

border-radius: 50%会产生非圆弧。同样，您可以通过为border-radius: 10% / 20%指定x轴和y轴的单独半径来覆盖您不喜欢的行为。

Answer 4

加上开尔文的回答， 要在矩形上获得完美的圆角，请尝试：

button {
    border-radius: 50vh;
}

Answer 5

style={{ 
        height: "150px", 
        width: "150px", 
        borderRadius: "50%", 
        boxSizing: "border-box", 
        overflow: "hidden"                         
}}

这使我摆脱了烦人的 OVAL Shape 问题。

• 这是嵌入式CSS。

Answer 6

只需使用 vw/vh 定义半径（至少对我有用）：

button{
    border-radius:1vh;
}

这是因为 vh / vw 对于视口始终保持不变并且与元素无关 :)

Answer 7

具有讽刺意味的是，另一个会影响边框半径的因素是border ....如果顶部有边框，而侧面没有边框，您将看到与使用百分比时相同的偏斜边框舍入效果半径。

我可以看到这是一个有用的功能。但是，请在CSS中添加注释，以告诉将来的您（或其他人）您这样做的原因。调试它很痛苦！