[譯] CSS border-radius 還可以這麼用？

zhangbao90s發表於2020-01-30

CSS

原文連結：CSS Border-Radius Can Do That?， by Nils Binder

怎樣用很少使用的特性，建立非常酷帥的效果？

TL/DR：在 CSS 中使用八個值指定 border-radius 時，可以建立自然外觀的形狀。沒時間閱讀所有內容？好的，這裡給你提供了最終的視覺化工具，點選這裡檢視、使用它吧。

簡介

在今年（譯者注：是指 2018 年）的 Frontend Conference Zurich 中，Rachel Andrew 談到了釋放 CSS 網格佈局的力量。在演講的最後，她提到了一些舊的 CSS 屬性，這些屬性留在了我的腦海：

“僅通過使用良好支援的 border-radius 就能設定影像圓角效果。不要忘記舊的 CSS 仍然存在而且還很有用。你無需為每個效果都使用花哨的方式實現。” — Rachel Andrew

聽完這次演講後不久，我開始更深入地研究使用 border-radius 可以完成的更多工作。

掌握 border-raduis

一個值

我們從基礎開始說起，希望不會讓你根絕厭煩。CSS 的 border-raduis 屬性已經出現好些年了，你很可能已經使用過它建立一些簡單的圓角效果了，最常使用的方式可能就是類似於這種方式：border-radius: 1em。時間倒退到 2010 年，這可能是當時的流行網站 css3please.com 裡最受人喜愛的熱烈討論的屬性了。

當使用一個值設定 border-raduis 時，元素每個角的角半徑都會統一設定成這個值。

除了可以使用固定長度單位（像 px、rem、em 這樣的），我們還能使用百分比值設定圓角效果。比如，我們經常會使用 50% 的設定圓形效果。百分比值是基於元素的寬、高計算的。因此，當在矩形上使用它時，就看不見對稱的圓角效果了。下面展示了在同一個矩形元素上使用 border-radius: 110px 和 border-radius: 30% 時得到的不同效果。

四個值

當你為 border-radius 屬性設定超過一個值的時候，那就是在為每個角單獨設定的，從左上角開始，沿順時針的順序設定的。再次要說的是，你可以使用百分比值，可以混合使用百分比值和固定長度單位。

用斜線分割的 8 個值（這才是有趣的地方）

我想上面介紹的知識大家都已經知道了。現在到了激動人心的時刻了，我們可以使用斜線分隔最多 8 個值，那麼會發生什麼呢？我們看看規範是怎麼說的：

如果在斜線之前和之後都設定了值，那麼斜線之前的值設定的是水平半徑，斜線之後的值設定的是垂直半徑。如果沒有斜線，就表示兩個半徑值是一樣的。—— W3C

也就是說，斜線前的值定義的是水平距離，而斜線後的值定義的則是垂直距離。這是什麼意思？還記得之前為矩形設定的百分比值嗎？對於距離垂直、水平距離以及不對稱的圓角，我們能夠設定不同的絕對值，而這正是使用 斜線語法 能夠達到的準確效果。

你可以比較下下面 border-radius: 4em 8em 與 border-radius: 4em / 8em 得到的不同效果：

左邊的對稱角佔據圓形的四分之一，而右邊的不對稱角佔據的則是橢圓形的四分之一。

老實說，你看到的形狀可能看起來感覺有些奇怪。還記得你使用 border-radius: 50% 實現的那個圓形嗎，之所以呈現圓形，是因為兩邊的角半徑值加起來是 100％（50％ + 50％ = 100％），兩個角半徑之間的空間都被用完了，這就為使用正方形實現圓形提供了可能。如果使用完整的 8 個值的 border-radius 斜線語法，我們能實現看起來有點像是琴撥或有機細胞的形狀出來：