CSS 圓角語法使用方法

這次要來介紹 CSS 圓角語法，透過圓角語法讓上下左右的邊邊圓角化，只需要透過border-radius這項語法的調整就能很容易辦到囉。

border-radius 使用方法

可以從原本的正方形變成四邊都圓角化更可以變成圓形。

使用方法很簡單直接在 CSS 裡頭輸入：

border-radius: 數字 + size 格式 + 結束符號;

正方形

不需要透過border-radius來進行設定，只需要加入寬度跟高度即可。

width:100px;
height:100px;

變成圓角

border-radius:15px;

變成圓形

<div style="width: 100px; height: 100px; border-radius: 50%; background: #000000;"> </div>

更進一步控制上下左右的圓角

上左

border-top-left-radius: 數字 + size 格式;

border-top-left-radius:15px;

上右

border-top-right-radius: 數字 + size 格式;

border-top-right-radius: 15px;

下面右邊

border-bottom-right-radius: 數字 + size 格式;

border-bottom-right-radius: 15px; 

下面左邊

border-bottom-left-radius: 數字 + size 格式;

border-bottom-left-radius: 15px;

上下左右的圓角簡寫的方式

border-radius: 上左 上右 下右 下左;

border-radius: 10px 20px 30px 40px;