css中border-radius屬性怎么使用

小編給大家分享一下css中border-radius屬性怎么使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　首先，我們可以利用border-radius屬性實(shí)現(xiàn)圓角

　　button和div的圓角可以使用border-radius屬性來創(chuàng)建

　　例如：

　　.button_kadomaru{

　　border-radius:20px;

　　}

　　可以像這樣指定一個圓角。

　　你指定的值只是px情況下橢圓半徑的大小，在％的情況下，它所指定的是橢圓半徑與指定框?qū)挾群透叨鹊谋嚷省?/p>

　　我們來看具體的代碼示例

　　圓角按鈕

　　HTML代碼

　　<buttonclass="button_kadomaru">圓角按鈕</button>

　　CSS代碼

　　.button_kadomaru{

　　background:rgb(92,92,225);

　　color:rgb(225,225,225);

　　border-radius:10px;

　　}

　　使用px指定半徑時的圓角邊框

　　HTML代碼

　　<divclass="div_kadomaru1">圓角邊框</div>

　　CSS代碼

　　.div_kadomaru1{

　　background:rgb(255,92,92);

　　width:200px;

　　height:100px;

　　padding:20px;

　　border-radius:20px;

　　}

　　使用％指定半徑時的圓角邊框

　　HTML代碼

　　<divclass="div_kadomaru2">指定%時的圓角。</div>

　　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)注億速云行業(yè)資訊頻道！