使用远大于元素尺寸的CSS边框半径

Question

使用比元素尺寸大得多的

border-radius

是否有任何问题？

例如，如果我想像这样上课

.circle

：

.circle {
    border-radius: 1000px;
}

所以现在我可以将此类应用于任何元素以使其成为圆形，如下所示：

<img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc">

我知道到目前为止我还没有遇到任何问题，但我是否只是为将来遇到更多问题做好了准备？

Answer 1

这里完全没有问题。您可以自由地在任何您想要的地方申请课程，没有任何问题。小于（高度或宽度小于）

2000px

的元素将变成圆形，大于（高度或宽度大于）

2000px

的元素不会变成圆形，而是保持其原始形状，但有大部分圆角。

这是在 W3 中提出的这里：

“如果任何水平半径大于盒子宽度的一半，则它 降低了 到那个值。如果任何垂直半径大于盒子高度的一半， 它被减少到该值。 （有四个水平半径和四个垂直半径。） 这是一个简单的算法，因为它独立于所有半径来查看每个半径 其他，但它不允许结合大和小的可能有用的边框 半径，它可以将四分之一圆变成四分之一椭圆。”-

border-radius

属性的文档

我应该提到，您可以使用百分比作为值，50% 是在元素最初是正方形的情况下创建圆形的最大值。如果元素不是正方形，那么它将创建一个椭圆形。

另请注意，当应用于所有角时，高于 50% 的所有值将相当于 50%（如将其应用于每个角的简写

border-radius: 50%

）。正如 jbutler483 在评论中指出，如果将其应用于各个角落，50% 与 100% 并不相同，因为它们如何相互结合。相反，所有高于 100% 的值都相当于 100%。

还需要注意的是，如果元素不是正方形，像

border: 50%

和

border: really-high-pixel-value

之类的东西可能会产生不同的效果。

还值得注意的是，如果你想设置一个非常高的像素值，你可以使用CSS常量

infinity

（你必须使用

calc(infinity * 1px)

）。

Answer 2

这是 W3 CSS 问题 29，已按照问题中的选项 3 解决，如规范中记录。

如果任何相邻边界半径太大以致于相交，则所有边界半径按比例减小，以便不相交。

在特殊情况下，方形元素上的所有四个半径都相同，并且半径大于盒子尺寸的一半，它们会减小到宽度/高度的一半，从而最终形成一个圆。