在 CSS 中，我們通常使用盒子（Box）來(lái)布局和定位網(wǎng)頁(yè)元素。這些盒子通常是矩形或正方形，有明顯的四個(gè)角和邊框。不過(guò)有時(shí)候，我們也希望創(chuàng)建一些不規(guī)則的盒子，使得網(wǎng)頁(yè)布局更具有創(chuàng)意和趣味性。

.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ff0000;
}

盒子無(wú)棱角也成為圓角，它們的實(shí)現(xiàn)方式是通過(guò) CSS 的 border-radius 屬性來(lái)實(shí)現(xiàn)的。使用這個(gè)屬性可以改變盒子的角度為圓形的，其值為半徑。

.box{
width: 100px;
height: 100px;
border-top-left-radius: 20px;
border-top-right-radius: 50%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 30px;
background-color: #00ff00;
}

border-radius 屬性也支持指定單獨(dú)的角半徑。可以通過(guò)設(shè)置四個(gè)屬性來(lái)控制盒子各個(gè)角的角度大小。如果只指定兩個(gè)值，則第一個(gè)值應(yīng)用于上角，第二個(gè)值應(yīng)用于下角。如果只有一個(gè)值，則四個(gè)角都使用這個(gè)值。

通過(guò)設(shè)置較大的半徑，我們可以創(chuàng)建出更加圓潤(rùn)和柔和的盒子。如果將半徑設(shè)置為元素本身尺寸的一半，則可以創(chuàng)建出平滑的圓形盒子。

.box{
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #0000ff;
}

有些時(shí)候，我們還可以通過(guò)使用 CSS 動(dòng)畫(huà)或 JavaScript 來(lái)使無(wú)棱角的盒子動(dòng)態(tài)地變化。這樣可以增加網(wǎng)頁(yè)交互性，吸引用戶(hù)的注意力。

總之，CSS 的 border-radius 屬性是掌握盒子無(wú)棱角技術(shù)的必要基礎(chǔ)。我們可以通過(guò)嘗試不同的組合來(lái)創(chuàng)建出多種形狀的無(wú)棱角盒子，從而讓網(wǎng)頁(yè)布局更加富有想象力。