html – 使用比边界尺寸大得多的CSS边界半径

使用比元素尺寸大得多的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">

我知道到目前为止我还没有遇到任何问题,但是我是否只是为了解决更多问题？

解决方法

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

这是在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.” –
07001

我应该提到你可以使用百分数作为值,50％是创建圆的最大值,因为元素最初是一个正方形.如果元素不是正方形,那么它将创建一个椭圆.

另请注意,当应用于所有角落时,所有高于50％的值将相当于50％(如速记边界半径：50％将其应用于每个角落).作为评论中的jbutler483 pointed out,如果它应用于各个角落,50％与100％不同,因为它们如何相互结合.相反,所有超过100％的值都相当于100％.

同样重要的是要注意,如果元素不是正方形,像border:50%和border:really-high-pixel-value这样的东西会有不同的效果.