在Web開(kāi)發(fā)中，設(shè)計(jì)師和前端工程師常常需要將方形元素變成圓角矩形。這時(shí)候，我們可以使用CSS中的border-radius屬性。

border-radius: 10px;

上述代碼可以將元素的四個(gè)角全部圓角化，并設(shè)置圓角的半徑為10個(gè)像素。如果我們想單獨(dú)為某個(gè)角設(shè)置圓角，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius。

border-top-left-radius: 10px;
border-top-right-radius: 10px;

如果我們要將元素設(shè)置為橢圓形，可以將border-radius的值設(shè)置為50%。如果元素高度和寬度相等，那么它就會(huì)變成一個(gè)完美的圓形。

border-radius: 50%;

另外，border-radius還可以設(shè)置多個(gè)圓角半徑，比如：

border-radius: 10px 20px 30px 40px;

這個(gè)代碼會(huì)將元素的左上角設(shè)置為10像素的圓角，右上角設(shè)置為20像素的圓角，右下角設(shè)置為30像素的圓角，左下角設(shè)置為40像素的圓角。當(dāng)只有兩個(gè)值時(shí)，第一個(gè)值表示左上角和右下角的圓角半徑，第二個(gè)值則表示右上角和左下角的圓角半徑。

總之，border-radius是CSS中非常方便的屬性，可以輕松實(shí)現(xiàn)各種圓角矩形效果。