網(wǎng)頁(yè)設(shè)計(jì)中，長(zhǎng)方形框框是比較常見(jiàn)的元素。但是長(zhǎng)方形的直角較為嚴(yán)謹(jǐn)和棱角分明，有些時(shí)候需要某一些元素或整個(gè)頁(yè)面有一些柔和、圓潤(rùn)或時(shí)髦的特點(diǎn)，此時(shí)長(zhǎng)方形的圓角便派上用場(chǎng)了，CSS 中有較為便利的 border-radius 屬性來(lái)設(shè)置圓角。

.box {
width: 400px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
}

這里我們定義了一個(gè) div 元素，它的寬度是 400 像素，高度是 200 像素，邊框?qū)挾仁?2 像素，顏色是 #ccc（淺灰）。接著設(shè)置了一個(gè)圓角為 10 像素的 border-radius 屬性。我們看到，這個(gè)長(zhǎng)方形的 4 個(gè)角被平滑地切掉了，變成了圓潤(rùn)的圓形。

當(dāng)然，在使用 border-radius 時(shí)，你還可以指定一個(gè)或多個(gè)角落邊角，而保留其他的平直，進(jìn)而實(shí)現(xiàn)更加豐富和多樣的效果。

.box {
width: 400px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px 20px 30px 40px;
padding: 20px;
}

這里我們指定了 4 個(gè)角分別為 10 像素、20 像素、30 像素和 40 像素，這會(huì)導(dǎo)致這個(gè)長(zhǎng)方形有不同的圓角效果。

在網(wǎng)頁(yè)設(shè)計(jì)中，圓角風(fēng)格已經(jīng)成為一種廣泛的設(shè)計(jì)趨勢(shì)，合理運(yùn)用 border-radius 屬性可以對(duì)頁(yè)面的美觀性和易用性產(chǎn)生重要的作用。