例如,如果我想像这样创建一个类.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">
我知道到目前为止我还没有遇到任何问题,但是我是否只是为了解决更多问题？
解决方法
这是在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这样的东西会有不同的效果.
