CSS 圓角語法使用方法

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

程式語法:CSS3
使用語法: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;
 1

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

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

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

相關文章
作者簡介
個人頭像照片
努力寫文中!