12

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

例如，如果我想像这样创建一个类.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">

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

4

1 回答 1

18

这里根本没有问题。您可以随意在任何地方申请课程，真的没有问题。小于（高度或宽度小于）2000px的元素将变成圆形，大于（高度或宽度大于）的元素2000px不会变成圆形，而是保持其原始形状但具有大部分圆角。

这是在 W3 中提出的：

"如果任何水平半径大于盒子宽度的一半，则减小到该值。如果任何垂直半径大于盒子高度的一半，则将其减小到该值。（有四个水平和四个“ - 财产证明文件border-radius

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

另请注意，当应用于所有角时，所有高于 50% 的值都将等同于 50%（如将border-radius:50%其应用于每个角的速记）。正如 jbutler483在评论中指出的那样，如果应用于单个角落，50% 与 100% 不一样，因为它们是如何相互结合的。相反，所有高于 100% 的值都等于 100%。

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

于 2013-08-15T19:55:46.127 回答