小編給大家分享一下CSS中如何使用border-radius屬性，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有銅鼓免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

 border-radius屬性是CSS中的屬性，可以使button和div的角變得圓滑，使用px或%指定橢圓半徑的大小，接下來我們就來看看border-radius屬性的具體用法。

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

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

例如：

.button_kadomaru {
  border-radius: 20px;
}

可以像這樣指定一個(gè)圓角。
你指定的值只是px情況下橢圓半徑的大小，在％的情況下，它所指定的是橢圓半徑與指定框?qū)挾群透叨鹊谋嚷省?/p>

我們來看具體的代碼示例

圓角按鈕

HTML代碼

圓角按鈕

CSS代碼

.button_kadomaru{
  background: rgb(92, 92, 225);
  color: rgb(225,225,225);
  border-radius: 10px;
}

使用px指定半徑時(shí)的圓角邊框

HTML代碼

圓角邊框

CSS代碼

.div_kadomaru1{
  background: rgb(255, 92, 92);
 width: 200px;
  height: 100px;
  padding: 20px;
  border-radius: 20px;
}

使用％指定半徑時(shí)的圓角邊框

HTML代碼

指定%時(shí)的圓角。

CSS代碼

.div_kadomaru2{
background: rgb(92, 255, 92);
width: 200px;
height: 100px;
padding: 20px;
border-radius: 40%;
}

最后在瀏覽器中顯示效果如下所示

我們也可以實(shí)現(xiàn)圓葉形狀

因?yàn)閎order-radius屬性能使角變圓，所以可以試著做一個(gè)有圓角的部分以及有角是完全尖的部分的葉子形狀。

圓滑的角用90px設(shè)置。

尖角的角是用3px設(shè)置的。

border-radius：90px 3px ;

我們來看具體的例子

HTML代碼

葉子形狀

CSS代碼

.div_kadomaru3 {
 background: rgb(92, 255, 92);
 width: 200px;
 height: 100px;
 padding: 20px;
 border-radius:90px 3px;
}

瀏覽器顯示效果如下

最后我們也可以設(shè)置不規(guī)則的形狀

我們來看具體的代碼示例

HTML代碼

CSS代碼

.div_kadomaru4 {
 background: rgb(92, 255, 92);
 width: 200px;
 height: 100px;
 padding: 20px;
 border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}

在瀏覽器上顯示效果如下

看完了這篇文章，相信你對CSS中如何使用border-radius屬性有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：CSS中如何使用border-radius屬性-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/dgcdgi.html