CSS是前端界最常用的樣式表語言，它可以幫助我們實現(xiàn)頁面的美化和交互。其中，圓角矩形樣式是網(wǎng)頁設(shè)計中常用的一種樣式，下面我們來看看如何利用CSS實現(xiàn)圓角矩形樣式。

/* CSS代碼 */
.rounded {
border-radius: 10px; 
/* 圓角的大小，單位為像素 */
background-color: #f2f2f2; 
/* 矩形的背景顏色 */
padding: 20px; 
/* 矩形內(nèi)邊距大小，單位為像素 */
}

代碼中，我們利用了CSS3的border-radius屬性來實現(xiàn)圓角矩形樣式。它可以指定每個角的圓角大小，也可以用一個數(shù)值指代所有邊的大小。

同時，我們還利用了background-color屬性來設(shè)置矩形的背景顏色，padding屬性來設(shè)置矩形內(nèi)邊距的大小。

具體實現(xiàn)效果如下：

除此之外，我們還可以使用CSS的偽元素來實現(xiàn)更多樣式的圓角矩形。比如，我們可以給一個元素設(shè)置一個圓形的邊框，并在其中嵌入一個矩形。實現(xiàn)代碼如下：

/* CSS代碼 */
.rounded-border {
border-radius: 50%; 
/* 圓形邊框的大小為元素寬度的50% */
width: 200px;
height: 200px;
position: relative; 
/* 使偽元素的定位相對于該元素進(jìn)行 */
}
.rounded-border:before {
content: "";
display: block;
position: absolute; 
/* 使偽元素的定位與元素位置無關(guān) */
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: #f2f2f2; 
/* 內(nèi)部矩形的背景顏色 */
border-radius: 10px; 
/* 矩形的圓角大小 */
}

具體實現(xiàn)效果如下：

以上就是關(guān)于CSS圓角矩形樣式的介紹，希望能夠幫助大家更好地運用CSS制作網(wǎng)頁的樣式。