如何使用很少使用的功能創(chuàng)建非?？岬男Ч?？TL/DR：當您使用CSS中指定邊框半徑的8個值時，可以創(chuàng)建外觀有機的形狀。在今年的前端會議上，蘇黎世的Rachel Andrew談到了如何打開CSS網格布局的力量。在她演講的最后，她提到了一個在我腦海中揮之不去的舊CSS屬性：

圖像是通過使用支持良好的邊界半徑設置成圓的，不要忘記舊的CSS仍然存在并且非常有用，你不需要為每個效果都使用一些花哨的東西。

——雷切爾·安德魯

在聽到這個演講后不久，你肯定可以創(chuàng)造出更多的圓圈，并開始深入挖掘使用邊界半徑可以做什么。

掌握這個特性、單值

讓我們從基礎開始，希望這不會讓你厭煩，您可能熟悉CSS，也知道邊界半徑。它已經存在多年了，主要用于像這樣的單值：border-radius：1em，它可能是2010年CSS3最受討論/喜愛的特性之一，當時css3please.com是你最好的朋友。

當你只使用一個值時，所有的角都會被這個值所包圍：

正如您可以在上面的例子中看到的，在固定長度值如px、rem或em旁邊，您還可以使用百分比。通常是通過設置邊界半徑為50%來創(chuàng)建一個圓。百分比值基于給定元素的寬度和高度。所以當你在一個矩形上使用它時，你將不再有對稱的角。這里有一個例子，展示了邊框半徑：110px和邊框半徑：30%應用于矩形之間的區(qū)別。

注意右邊的角不是對稱的，記住這一點。我們稍后會回來討論這個問題。

四個不同的值

當您使用多個值時，您將開始為每個角設置值，從左上角開始，然后順時針移動。同樣，您也可以使用百分比，還可以將百分比與固定長度值混合。

由斜杠分隔的8個值

我想你們大多數人已經做了我上面解釋的所有事情，現在我們進入令人興奮的部分。如果使用斜杠分隔值并指定最多8個值，會發(fā)生什么情況？讓我們看看，說明書是怎么說的：

如果在斜杠之前和之后給出值，那么斜杠之前的值設置水平半徑，斜杠之后的值設置垂直半徑。如果沒有斜杠，則值設置為相等的半徑。

——W3C

因此，斜杠前面的值表示水平距離，而斜杠后面的值表示垂直長度。但這意味著什么呢？還記得矩形的百分比嗎？垂直距離和水平距離以及不對稱圓角的絕對值不同，這正是使用斜杠語法時得到的結果。

因此，當你比較邊界半徑：4em 8em和邊界半徑：4em / 8em時，結果是完全不同的。

左邊對稱的角是圓的四分之一，而右邊不對稱的角是省略的一部分。

老實說，你得到的形狀有點奇怪。但是要記住你用邊界半徑創(chuàng)建的圓圈：50%。你會得到一個圓，因為定義一邊的兩個值加起來等于100%（50% + 50% = 100%），并且沒有留下直線，這讓你想起了原來的正方形。如果您將相同的邏輯應用到完整的8個值邊界半徑語法中，您可以創(chuàng)建一個看起來有點像plectrum或有機單元格的形狀：

最后是四個重疊的橢圓組成了最終的形狀。簡單的哈！

別慌，我們?yōu)槟阕隽艘粋€視覺發(fā)生器

花了一些時間來適應這種語法，不知何故，這并不那么直觀。為了讓事情變得簡單一點，我們構建了一個小工具，幫助您創(chuàng)建自己的有機形狀。

現在您已經知道了總共的8個值，您可能會感到有點難過，因為我們的border-radius工具沒有給您單獨設置每個值的選項…

如果你年紀夠大，你可能還記得1984年《捉鬼敢死隊》電影中的一句話：

"不要過河。"-"為什么？"-"那太糟糕了。"

這里也有類似的情況：如果你在一邊交叉把手，形狀就會發(fā)生變化。但你自己看看，畢竟，它不會以完全的質子逆轉或什么的結束，但不要說，我沒有警告你。

非常感謝simurai，早在2010年，他就發(fā)明了一些CSS3棒棒糖紐扣。盡管它們看起來有點過時，但它是我唯一遇到和學習過斜杠語法的地方。