CSS圓角邊框的寫法

在CSS中，我們可以使用border-radius屬性來(lái)創(chuàng)建圓角邊框，這個(gè)屬性接受一個(gè)值，用于指定圓角的半徑，如果你想創(chuàng)建一個(gè)半徑為10像素的圓角邊框，你可以這樣寫：

div {
  border: 2px solid #000;
  border-radius: 10px;
}

在這個(gè)例子中，border屬性用于設(shè)置邊框的寬度、樣式和顏色，而border-radius屬性則用于設(shè)置圓角的半徑，你可以根據(jù)需要調(diào)整這些值。

除了指定一個(gè)統(tǒng)一的圓角半徑外，你還可以分別指定每個(gè)角的半徑，如果你想讓左上角和右下角的半徑為10像素，而左下角和右上角的半徑為20像素，你可以這樣寫：

div {
  border: 2px solid #000;
  border-radius: 10px 20px 20px 10px;
}

在這個(gè)例子中，border-radius屬性的值分別對(duì)應(yīng)于左上角、右上角、右下角和左下角，依次設(shè)置每個(gè)角的半徑。

需要注意的是，border-radius屬性的值可以是任何有效的CSS長(zhǎng)度單位，如像素(px)、毫米(mm)、厘米(cm)等，你也可以使用相對(duì)單位，如百分比(%)、em等。

如果你使用的是舊版本的瀏覽器，可能需要添加瀏覽器前綴來(lái)確保兼容性，對(duì)于Firefox瀏覽器，你可以這樣寫：

div {
  border: 2px solid #000;
  -moz-border-radius: 10px; /* Firefox 3.6 and earlier */
}

在這個(gè)例子中，-moz-border-radius屬性用于設(shè)置Firefox瀏覽器中的圓角邊框，其他瀏覽器可以使用相應(yīng)的前綴或?qū)傩悦Q來(lái)設(shè)置圓角邊框。