CSS 屬性 border-radius 允許你設置元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。
【基礎知識】
border-radius使用最多的可能就是通過改變圓角來使元素變的圓滑，常用方法可能如
下：
border-radius: 4px 4px 4px 4px;
border-radius: 4px;
/* 等價於：*/
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
上述方法可能就是常用方法，但是border-radius也有/這種用法，比如：
border-radius: 50% / 30%
/* 等價於： */
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
border-bottom-right-radius: 50% 30%;
border-bottom-left-radius: 50% 30%;
舉例【相同半徑】
至於這兩種有什麼區別就要講一下，border-radius到底是如何來改變圓角的。通過開頭引用的話我們可以知道它理論上的意思，但是真實情況如何，就是下圖這樣：
我們看到個a代表的就是圓的半徑，一個圓控制一個角。所以我們可以看到會有4個圓。通過設置這4個圓的半徑所描繪出的圖形，就是帶有圓角的圖形。
舉例【不同半徑】
通過這裏我們可以發現，如果我們不想讓一個圓的半徑都是相同的呢，我們就用到了第二段代碼的寫法，也就是x/y這種寫法。具體意思如下圖：
【擴展】
通過這種方式我們可以控制一個圓的不同半徑。再發散下，如果我們控制每個圓的半徑都不相同，會出現什麼情況？
通過這種設定不同半徑的方式，我們可以實現一些簡單的圖形。
可視化操作
【疑問】
border-radius: 50%;
border-radius: 100%;
留個小問題，50%和100%的區別？視覺上來說，50%和100%都能完成一個圓，但是它們兩個有什麼區別呢？
提示：當border-radius使用了%時，半徑的值就是元素的寬和高。
如果你覺得這篇文章幫助到了你，我很高興。
關注【前端小白的成長記錄】每天都能看到雖然很【短】但是很【實用】的文章。
後臺回覆你想看的資料，比如React。我會找到相關的【視頻】和【電子書】發給你。
