CSS 教學

CSS 上的圓角語法

這次要來介紹 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

喜歡這篇文章的話
請按個讚或者分享支持一下！

喜歡這篇文章的話
請按個讚或者分享支持一下！

最新的教學及情報資訊都在INMAG！

作者簡介

Avatar photo
Jin
寫好每一篇文章讓各位都能學習到各種小知識，希望大家會喜歡！
更多文章