html - 使用比元素尺寸大得多的 CSS border-radius

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

这里完全没有问题。您可以在任何您喜欢的地方自由申请该类(class)，真的没有问题。小于(高度或宽度小于)2000px的元素会变成圆形，大于(高度或宽度大于)2000px的元素不会变成圆形，而是停留它们的原始形状，但主要是圆 Angular 。

这是在 W3 中提出的 here :

"If any horizontal radius is larger than half the width of the box, it is reduced to that value. If any vertical radius is larger than half the height of the box, it is reduced to that value. (There are four horizontal and four vertical radii.) This is an easy algorithm, because it looks at each radius independently of all others, but it disallows possibly useful borders that combine large and small radii and it may turn quarter circles into quarter ellipses." - The documentation of the border-radius property

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

另请注意，当应用于所有 Angular 时，所有高于 50% 的值都将等同于 50%(如将其应用于每个 Angular 的速记 border-radius:50%)。作为 jbutler483 pointed out在评论中，如果将其应用于单个 Angular ，则 50% 与 100% 不同，因为它们是如何相互结合的。相反，所有高于 100% 的值都等于 100%。

同样重要的是要注意像 border:50% 这样的东西和 border:really-high-pixel-value如果元素不是正方形，可能会产生不同的效果。