CSS3提供了一種簡單方便的方式來畫圓角矩形，我們只需要使用border-radius屬性就可以快速的實(shí)現(xiàn)。

.round-corner {
border-radius: 10px;
}

通過這樣的代碼我們就可以把一個普通的矩形變成圓角矩形，其中10px是圓角的半徑。

如果我們需要只設(shè)置某個角的圓角，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius屬性分別設(shè)置左上、右上、左下、右下四個角的圓角半徑。

.top-left-corner {
border-top-left-radius: 10px;
}
.top-right-corner {
border-top-right-radius: 10px;
}
.bottom-left-corner {
border-bottom-left-radius: 10px;
}
.bottom-right-corner {
border-bottom-right-radius: 10px;
}

當(dāng)然，我們也可以像下面這樣只設(shè)置兩個相鄰的角：

.top-corner {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bottom-corner {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.left-corner {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.right-corner {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

通過這些簡單的代碼，我們可以快速輕松地實(shí)現(xiàn)不同形狀的圓角矩形效果。