[譯] CSS border-radius 還能夠這麼用？

原文連接：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 斜線語法，咱們能實現看起來有點像是琴撥或有機細胞的形狀出來：

上面的最終形狀，是由下面四個重疊的橢圓造成的。簡單的哈！（譯者注：不簡單呢）

不要擔憂……這裏爲你打造了一個視覺生成器

我也是花了一點時間來習慣這種斜線語法的。有時候感受起來還不是那麼直觀。爲了讓你更加輕鬆使用，這裏爲你打造一個能夠 生成圓角代碼的可視化小工具，幫助你建立本身想要實現的各類形狀。

坐好，別激動

如今你已經學習了 8 個值的斜線語法，但可能仍是會感受有點難過，由於咱們的 border-radius-tool 不能提供針對每一個角的兩個半徑值的單獨設置……來，坐好，別激動，這裏有一個 8 點全方位控制版 的小工具。

隨意調節上面的 8 個控制點，就可能會獲得你意想不到的好看形狀呢，試試吧！

PS. 很是感謝 simurai。早在 2010 年，他建立了一些 CSS3 BonBon 按鈕效果。即便它們看起來有點過期了，但這也是我惟一遇到並瞭解過斜槓語法的地方。

下面是使用斜線語法實現的一些酷炫效果：

Photos by gratisography.com

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）