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 here中提出的：

“如果任何水平半径大于盒子宽度的一半，则为降低了达到那个价值。如果任何垂直半径大于盒子高度的一半，它减少到那个值。（有四个水平和四个垂直半径。）这是一种简单的算法，因为它可以独立地查看每个半径其他人，但它不允许可能有用的边界，结合大小半径，它可能会将四分之一圆变为四分之一椭圆。“ - The documentation of the border-radius property

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

另请注意，当应用于所有角落时，所有超过50％的值将相当于50％（例如将速度border-radius:50%应用于每个角落）。作为评论中的jbutler483 pointed out，如果它应用于各个角落，由于它们如何相互结合，50％与100％不同。相反，所有超过100％的值都相当于100％。

同样重要的是要注意，如果元素不是正方形，border:50%和border:really-high-pixel-value之类的内容会有不同的效果。

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

1 个答案: