邊界半徑的怪異行為

Question

我了解到，通過使用此語法，我們還可以制作橢圓形的邊界半徑。

border-radius: horizontal radius / vertical radius

首先，我嘗試了border-radius: 10px 20px/10px ，它起作用了。

然后，我嘗試了border-radius: 20px/10px 10px/10px ，它沒有用，Chrome開發者工具將其突出顯示為錯誤。

感到困惑和沮喪，我去了MDN ，然后感到更加困惑。

它顯示的border-radius: 10px 5% / 20px 25em 30px 35em ，這很奇怪嗎？ 盡管他們在評論中提到值屬於/* (first radius values) / top-left | top-right | bottom-right | bottom-left */ /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ ，但first radius values是多少。

我對它的研究越多，看起來就越混亂。 我知道我想念什么，但不知道！

Answer 1

仔細看，您有：

border-radius: TLH TRH BRH BLH / TLV TRV BRV BLV;

哪里
T / B是頂部/底部，
L / R是左/右，和
水平/垂直是水平/垂直

如果您沒有“ /垂直大小”，則默認情況下，它們將復制水平大小（即圓角）。 如果您沒有4種尺寸，它將重復您提供的值。

一旦掌握了基本結構，就可以嘗試使用值並查看會發生什么。 這是學習事情的好方法：)