CSS圓角是網(wǎng)頁設(shè)計中經(jīng)常使用的一個屬性。大多數(shù)人可能知道，通過border-radius屬性可以實(shí)現(xiàn)邊框的圓角效果。但事實(shí)上，這個屬性可以設(shè)置多個值來實(shí)現(xiàn)更為豐富的效果。

在語法上，border-radius屬性可以使用4個值或2個值來描述一個矩形的四個角。兩個值分別表示水平方向和垂直方向的半徑，可以使用相對單位（如em、rem）或像素（px）來指定半徑大小。而四個值則分別對應(yīng)左上、右上、右下、左下四個角的半徑大小。

/* 2個值的語法 */
border-radius:10px 20px;
/* 4個值的語法 */
border-radius:10px 20px 30px 40px;

設(shè)置單個值時，四個角的半徑都相等，即所有角都是一個圓。而在設(shè)置四個值時，每個角可以有不同的半徑。此外，還可以通過使用百分比來指定半徑大小，這樣圓角的大小就相對于矩形的尺寸而定。

示例：

/* 通過兩個值設(shè)置圓角，相當(dāng)于一個正圓 */
div {
width: 100px;
height: 100px;
border-radius: 50%;
}
/* 通過四個值設(shè)置不同大小的圓角 */
div {
width: 200px;
height: 100px;
border-radius: 20px 40px 60px 80px;
}
/* 通過百分比指定半徑大小 */
div {
width: 200px;
height: 200px;
border-radius: 50%;
}
div {
width: 200px;
height: 100px;
border-radius: 20% 40% 60% 80%;
}

除了以上的簡單示例，通過組合不同的值，可以得到更為復(fù)雜的效果，如橢圓形、三角形等等。這些效果在具體的網(wǎng)頁設(shè)計中，可以幫助設(shè)計師創(chuàng)造多姿多彩的圖形和布局效果。