如何用CSS設(shè)置圓角矩形

在CSS中，我們可以使用border-radius屬性來設(shè)置圓角矩形，這個(gè)屬性可以定義在一個(gè)元素的四個(gè)角落，使它們變得圓滑，從而形成一個(gè)圓角矩形。

我們需要?jiǎng)?chuàng)建一個(gè)HTML元素，例如一個(gè)div元素，我們可以使用CSS來設(shè)置這個(gè)元素的border-radius屬性。

如果我們想要一個(gè)寬度為200px、高度為100px的圓角矩形，我們可以這樣寫：

div {
  width: 200px;
  height: 100px;
  border-radius: 10px;
}

在這個(gè)例子中，border-radius屬性的值設(shè)置為10px，這意味著四個(gè)角落的半徑都是10像素，你也可以根據(jù)需要調(diào)整這個(gè)值。

如果你想要設(shè)置不同角落的半徑，你可以使用斜線（/）來分隔四個(gè)值，

div {
  width: 200px;
  height: 100px;
  border-radius: 10px / 20px;
}

在這個(gè)例子中，左上角的半徑是10像素，右下角的半徑是20像素，你可以根據(jù)需要調(diào)整這些值。

border-radius屬性只在支持CSS3的瀏覽器中有效，如果你需要支持舊版本的瀏覽器，你可能需要使用一些回退技術(shù)或者使用圖片來模擬圓角矩形的效果。