使用比边界尺寸大得多的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可以有不同的效果,如果该元素是不是正方形.