︿
✖ CLOSE

CSS 上的圓角語法

2 年 之前│
Jin

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

程式語法:CSS3
使用語法:border-radius

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

border-radius: 數字 + size 格式;

範例:從原本的正方形 > 變成四邊都圓角化 > 更可以變成圓形

> 正方形

<div style=”width:100px;height:100px;background:#000000;”></div>

> 變成圓角

<div style=”width:100px;height:100px;border-radius:15px;background:#000000;”></div>

> 變成圓形

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

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

上左

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

範例:

<div style=”width:100px;height:100px;border-top-left-radius:15px;background:#000000;”></div>

上右

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

範例:

<div style=”width:100px;height:100px;border-top-right-radius:15px;background:#000000;”></div>

下面右邊

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

範例:

<div style=”width:100px;height:100px;border-bottom-right-radius:15px;background:#000000;”></div>

下面左邊

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

範例:

<div style=”width:100px;height:100px;border-bottom-left-radius:15px;background:#000000;”></div>
 1

簡寫的方式:

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

範例:

<div style=”width:100px;height:100px;border-radius:10px 20px 30px 40px;background:#000000;”></div>

關鍵字: CSS

▪ 相關文章