圓角填充（Border Radius）是CSS3提供的一個(gè)很有趣的功能，可以讓我們輕松實(shí)現(xiàn)各種有趣的圓角效果。

要實(shí)現(xiàn)圓角填充，我們可以使用border-radius屬性。該屬性最簡單的寫法是：

border-radius: 10px;

這個(gè)屬性設(shè)置了圓角半徑為10px，如果一個(gè)元素四個(gè)角的半徑相同，那么可以使用簡寫形式：

border-radius: 10px 10px 10px 10px;

上面的代碼將四個(gè)角的圓角半徑都設(shè)置為10px。其中，第一個(gè)數(shù)字代表左上角，第二個(gè)數(shù)字代表右上角，第三個(gè)數(shù)字代表右下角，第四個(gè)數(shù)字代表左下角。如果左右兩邊的圓角半徑相同，上下兩邊的圓角半徑也相同，那么可以使用兩個(gè)值的簡寫形式：

border-radius: 10px 20px;

上面的代碼將左上角和右下角的圓角半徑都設(shè)置為10px，右上角和左下角的圓角半徑都設(shè)置為20px。

如果要實(shí)現(xiàn)橢圓形的圓角效果，可以使用兩個(gè)半徑來替代1個(gè)半徑值。例如：

border-radius: 50px/20px;

上面的代碼將左上角和右下角的圓角半徑設(shè)置為50px，右上角和左下角的圓角半徑設(shè)置為20px，這樣就可以實(shí)現(xiàn)橢圓形的圓角效果。

除了使用簡寫形式，還可以單獨(dú)設(shè)置每個(gè)角的圓角半徑：

border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 30px;
border-top-left-radius: 15px;

上面的代碼分別設(shè)置了右上角、右下角、左下角和左上角的圓角半徑。

需要注意的是，使用border-radius屬性來設(shè)置圓角效果時(shí)，可能會(huì)出現(xiàn)鋸齒的問題。解決這個(gè)問題的方法是使用CSS3提供的-webkit-border-radius和-moz-border-radius，例如：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

上面的代碼將會(huì)向各種瀏覽器提供圓角效果，并且避免了鋸齒的問題。