使用比元素尺寸更大的CSS border-radius

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">

我知道目前为止我还没有遇到任何问题，但是我是不是在为将来更多的问题埋下伏笔？

- frshca

---

人们经常使用这些技巧来制作CSS形状。目前还没有问题。http://css-tricks.com/examples/ShapesOfCSS/ - Diodeus - James MacFarlane

@Diodeus 在所有这些示例中，它们都没有超出具有边框半径的元素的尺寸。Frshca正在询问是否允许超出尺寸。 - Leng

Answer 1

这里完全没有问题。您可以自由地在任何地方应用该类，真的没有问题。高度或宽度小于 2000px 的元素将变成圆形，高度或宽度大于 2000px 的元素将不会变成圆形，而是保留其原始形状但拥有大量圆角。

这在 W3 这里 中提到过：

“如果任何水平半径大于盒子宽度的一半，那么它将被缩减到该值。如果任何垂直半径大于盒子高度的一半，则会将其缩减到该值。（有四个水平和四个垂直半径。）这是一个简单的算法，因为它独立地查看每个半径，但它不允许组合大和小半径的可能有用的边框，并且它可能会将四分之一圆弧变成四分之一椭圆。” - “border-radius”属性的文档 “我应该提到，您可以使用百分比作为值，其中50％是最大值，如果元素最初是正方形，则会创建一个圆。如果元素不是正方形，则会创建一个椭圆。”

还要注意，当应用于所有角落（如简写的border-radius:50%）时，所有高于50%的值都等同于50%。正如jbutler483在评论中指出的那样，如果应用于单个角落，50%与100%不同，因为它们是如何组合的。相反，所有高于100%的值都等同于100%。

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

- Zach Saucier

---

注意，所有大于50％的值都将等同于50％ - 我不同意这个。 - jbutler483

@jbutler483 你对它有什么不同意的地方吗？ - Zach Saucier

请问需要翻译的内容是： This != this - jbutler483

@jbutler483 啊，但是 这个 === 这个。我会澄清的。 - Zach Saucier

border-radius: 50%和border-radius: really-high-pixel-value的结果差异是由于用于减少重叠边框曲线的算法造成的副作用。算法的不同导致了这种差异。 - gvas

Answer 2

这是W3 CSS issue-29，根据问题中的选项3解决，并且在规范中记录。

如果任何相邻的边框半径太大而相交，则所有边框半径将按比例减小，以使它们不相交。

在正方形元素上，如果四个半径都相同，并且半径大于盒子尺寸的一半，则它们会被减小到宽度/高度的一半，以便最终形成一个圆形。

- TomB