作者簡介
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;
相關文章