CSS中實(shí)現(xiàn)帶圓角的矩形，是網(wǎng)頁設(shè)計(jì)中經(jīng)常遇到的一個(gè)問題。使用CSS的border-radius屬性可以輕松地解決這個(gè)問題。我們可以通過設(shè)置border-radius屬性的值來實(shí)現(xiàn)想要的圓角程度。

div {
border: 2px solid #000;
border-radius: 10px;
width: 200px;
height: 100px;
}

上面的代碼是創(chuàng)建一個(gè)帶10px圓角的矩形。其中，border屬性設(shè)置邊框的寬度和顏色，width和height屬性設(shè)置寬度和高度。而border-radius屬性則設(shè)置圓角的程度。

如果我們想要設(shè)置不同程度的圓角，可以單獨(dú)設(shè)置每一個(gè)角的圓角程度。代碼如下：

div {
border: 2px solid #000;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 30px;
width: 200px;
height: 100px;
}

上面的代碼設(shè)置了四個(gè)角落的圓角程度，從而創(chuàng)建出一個(gè)比前面更加復(fù)雜的形狀。通過這個(gè)屬性的掌握，我們可以輕松地實(shí)現(xiàn)一些網(wǎng)頁設(shè)計(jì)中需要用到的復(fù)雜形狀，讓網(wǎng)頁的視覺效果更加出色。