小編給大家分享一下css中border-radius屬性怎么使用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)公司是專業(yè)的珠暉網(wǎng)站建設(shè)公司,珠暉接單;提供成都網(wǎng)站設(shè)計、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行珠暉網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
首先,我們可以利用border-radius屬性實現(xiàn)圓角
button和div的圓角可以使用border-radius屬性來創(chuàng)建
例如:
.button_kadomaru{
border-radius:20px;
}
可以像這樣指定一個圓角。
你指定的值只是px情況下橢圓半徑的大小,在%的情況下,它所指定的是橢圓半徑與指定框?qū)挾群透叨鹊谋嚷省?/p>
我們來看具體的代碼示例
圓角按鈕
HTML代碼
CSS代碼
.button_kadomaru{
background:rgb(92,92,225);
color:rgb(225,225,225);
border-radius:10px;
}
使用px指定半徑時的圓角邊框
HTML代碼
CSS代碼
.div_kadomaru1{
background:rgb(255,92,92);
width:200px;
height:100px;
padding:20px;
border-radius:20px;
}
使用%指定半徑時的圓角邊框
HTML代碼
CSS代碼
.div_kadomaru2{
background:rgb(92,255,92);
width:200px;
height:100px;
padding:20px;
border-radius:40%;
}
以上是“css中border-radius屬性怎么使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!