CSS中的圓角可以讓矩形變得更加生動(dòng)有趣。其中，最常見的就是矩形上面的圓角，很多網(wǎng)頁(yè)設(shè)計(jì)都用到了這個(gè)效果。下面我們就來(lái)學(xué)習(xí)如何使用CSS來(lái)實(shí)現(xiàn)矩形上面圓角。

/*首先，我們要?jiǎng)?chuàng)建一個(gè)矩形*/
.rectangle {
width: 200px;
height: 100px;
background-color: #f1f1f1;
}

上面的代碼創(chuàng)建了一個(gè)寬度為200像素，高度為100像素，背景顏色為灰色的矩形。

/*現(xiàn)在，我們來(lái)實(shí)現(xiàn)這個(gè)矩形上面的圓角*/
.rectangle {
width: 200px;
height: 100px;
background-color: #f1f1f1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

我們?cè)谠瓉?lái)代碼的基礎(chǔ)上添加了兩行代碼，分別設(shè)置了矩形上面左側(cè)和右側(cè)的圓角半徑為10像素。

/*如果想讓圓角更加明顯，可以增加圓角半徑的值*/
.rectangle {
width: 200px;
height: 100px;
background-color: #f1f1f1;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

上述代碼將圓角半徑增加到20像素，這樣矩形上面的圓角就變得更加明顯了。

通過(guò)上面的幾個(gè)例子，我們可以看到，在CSS中添加矩形上面的圓角是非常容易的。只需要設(shè)置border-top-left-radius和border-top-right-radius兩個(gè)屬性的值即可。