作者簡介
寫好每一篇文章讓各位都能學習到各種小知識,希望大家會喜歡!
這次要來介紹 CSS 圓角語法,透過圓角語法讓上下左右的邊邊圓角化,只需要透過border-radius
這項語法的調整就能很容易辦到囉。
程式語法:CSS3
使用語法:border-radius
可以從原本的正方形變成四邊都圓角化更可以變成圓形。
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;
border-radius: 上左 上右 下右 下左;
border-radius: 10px 20px 30px 40px;
喜歡這篇文章的話
請按個讚或者分享支持一下!
喜歡這篇文章的話
請按個讚或者分享支持一下!
最新的教學及情報資訊都在INMAG!