CSS border-radius 新玩法(含可視化生成工具)

Sponsor

這個 CSS 屬性對于前端人員一定不陌生，一直以來都把它當作矩形圓角使用，然而，對于喜歡創新的設計師來說，這是不夠的，我們要最大化利用 border-radius，讓它玩得更出色。

先來看看截圖，這就是用?border-radius 實現的，而且并不復雜。

首先我們來為設計師簡單普及下 border-radius 一般寫法，代碼如下：

.box{
  border-radius: 30%; /* 也可以用PX代替 */
}

當這樣寫的時候，矩形的四角就會自動變為相應數值的圓角，如下圖：

因為我們只輸入了一個數值，所以所有角都會被四舍五入，若要固定值可以使用 px，百分比(%)就使用 rem, em這些單位。

讓我們看看「border-radius: 110px」與「border-radius: 30%」的矩形會是什么樣的，請看下圖例子：

注意右圖的圓角是不對稱的，后面文章我們再來看看。

用4個值的樣式

當設置多個 border-radius 數值時，從左上角開始順時針設置，您還可以使用百分比單位，甚至可以與固定值混合使用。

用8個值的樣式（這里變得有趣了）

Border-radius 最多可以使用8個數值，這就可以給設計師帶來更多創意空間了，注意，需要作用斜杠「 / 」來分隔4個值，這是規范。

如果在斜杠前后設置一個值，則斜杠前面的值設置水平半徑，斜杠后面的值設置垂直半徑。如果沒有斜杠，則該值將兩個半徑設置為相等。

來自：W3C

因此，斜杠之前的值定義水平長度，而斜杠之后的值定義垂直長度。但是，這是什么意思？建議看下圖更好的幫你理解。

使用斜杠和不使用斜杠的區別

上圖是比較「border-radius: 4em 8em」與「border-radius: 4em / 8em」的結果。請記住，如果要一個正方形變為圓形，那么可以直接這樣寫 「border-radius: 50%」 即可。

然后，你可以設置8個不同數值，就會得到一個像「有機體」的形狀。

其實是四個重疊的橢圓，構成最終的形狀

不要擔心，這里有個在線可視化演示

你可以隨意設置寬、高，以及能過鼠標拖拽來改變8個角的數值，這樣就可以很方便的查看變化。

花式半徑在線產生器：https://9elements.github.io/fancy-border-radius/

今天的CSS屬性就介紹到這里，希望你對border-radius有更多深刻的認識，并適當運用到設計項目上。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。