CSS中的圓角矩形

CSS提供了很多樣式，其中之一就是圓角矩形。圓角矩形又稱圓角矩形盒子，它是一種矩形，但是它的四個角被切成了圓弧形狀。

在CSS中，我們可以使用border-radius屬性來實現圓角矩形。這個屬性接受一個長度值，表示角的圓弧半徑。例如：

div {
border-radius: 5px;
}

上面的代碼將一個簡單的矩形變成了一個圓角矩形，因為它將四個角的圓弧半徑都設置成了5像素。

border-radius屬性也可以接受多個值，分別表示4個角的圓弧半徑。例如：

div {
border-radius: 10px 20px 30px 40px;
}

上面的代碼將四個角的圓弧半徑分別設置成10像素、20像素、30像素和40像素。

除了數值外，border-radius屬性還可以接受特殊值“50%”，表示將角的圓弧半徑設置成它所在邊的長度的一半。這個特殊值可以讓我們輕松地制作出圓形或橢圓形：

div {
width: 100px;
height: 100px;
border-radius: 50%;
}
div.ellipse {
width: 200px;
height: 100px;
border-radius: 50%/25%;
}

上面的代碼分別制作了一個半徑為50%的圓形和一個半徑為橫向25%、縱向50%的橢圓形，它們的CSS如下：

div.ellipse {
width: 200px;
height: 100px;
border-radius: 50%/25%;
}

總之，通過border-radius屬性，我們可以輕松地制作出各種形狀美妙的圓角矩形，讓我們的頁面更加美觀。