CSS中如何使用border-radius屬性

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

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

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

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

例如：

.button_kadomaru {
  border-radius: 20px;
}

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

我們來看具體的代碼示例

圓角按鈕

HTML代碼

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

CSS代碼

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

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

HTML代碼

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

CSS代碼

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

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

HTML代碼

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

CSS代碼

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

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

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

因為border-radius屬性能使角變圓，所以可以試著做一個有圓角的部分以及有角是完全尖的部分的葉子形狀。

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

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

border-radius：90px 3px ;

我們來看具體的例子

HTML代碼

<div class="div_kadomaru3">葉子形狀</div>

CSS代碼

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

瀏覽器顯示效果如下

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

我們來看具體的代碼示例

HTML代碼

 <div class="div_kadomaru4"></div>

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)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！