︿
    首頁 › 網站製作 › CSS 語法 › CSS 上的圓角語法

CSS 上的圓角語法

2017-08-10 Jin@RJ 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

▪ 相關文章

Jin@RJ
Jin@RJ
文章目前或許還寫的不好，但會盡力寫好每一篇文章的，讓各位都能學習到各種小知識或者心得文章，希望大家會喜歡！
更多文章

沒有留言

本篇文章目前沒有留言。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。