使用比元素尺寸大得多的 CSS 边框半径

Question

使用比元素尺寸大得多的border-radius有什么问题吗？

例如，如果我想像这样创建一个.circle类：

.circle {
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    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这样的东西可能会产生不同的效果。

Answer 2

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

如果任何相邻的边界半径大到相交，那么所有的边界半径都会按比例减小，这样就不会相交。

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