
CSS 上的圓角語法
這次要來介紹 CSS 上的框線語法來讓上下左右的邊邊圓角化,只需要透過 border-radius 這項語法的調整就能很容易辦到囉。
程式語法:CSS3
使用語法:border-radius
MENU
使用方法很簡單直接在 CSS 裡頭輸入:
border-radius: 數字 + size 格式;
範例:從原本的正方形 > 變成四邊都圓角化 > 更可以變成圓形
> 正方形
> 變成圓角
> 變成圓形
更進一步控制上下左右的圓角
上左
border-top-left-radius: 數字 + size 格式;
範例:
上右
border-top-right-radius: 數字 + size 格式;
範例:
下面右邊
border-bottom-right-radius: 數字 + size 格式;
範例:
下面左邊
border-bottom-left-radius: 數字 + size 格式;
範例:
1
簡寫的方式:
border-radius: 上左 上右 下右 下左;
範例:
發表迴響