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

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

——雷切爾·安德魯

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

掌握這個(gè)特性、單值

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

當(dāng)你只使用一個(gè)值時(shí)，所有的角都會(huì)被這個(gè)值所包圍：

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

注意右邊的角不是對(duì)稱的，記住這一點(diǎn)。我們稍后會(huì)回來討論這個(gè)問題。

四個(gè)不同的值

當(dāng)您使用多個(gè)值時(shí)，您將開始為每個(gè)角設(shè)置值，從左上角開始，然后順時(shí)針移動(dòng)。同樣，您也可以使用百分比，還可以將百分比與固定長(zhǎng)度值混合。

由斜杠分隔的8個(gè)值

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

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

——W3C

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

因此，當(dāng)你比較邊界半徑：4em 8em和邊界半徑：4em / 8em時(shí)，結(jié)果是完全不同的。

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

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

最后是四個(gè)重疊的橢圓組成了最終的形狀。簡(jiǎn)單的哈！

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

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

現(xiàn)在您已經(jīng)知道了總共的8個(gè)值，您可能會(huì)感到有點(diǎn)難過，因?yàn)槲覀兊腷order-radius工具沒有給您單獨(dú)設(shè)置每個(gè)值的選項(xiàng)…

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

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

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

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