生成圓角矩形的方法

在CSS中，可以使用border-radius屬性來(lái)生成圓角矩形。border-radius屬性可以設(shè)置一個(gè)元素的圓角半徑，從而使其呈現(xiàn)出一個(gè)圓角的形狀。

如果想要生成一個(gè)邊長(zhǎng)為200px的圓角矩形，可以編寫如下CSS代碼：

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

在上面的代碼中，div元素的寬度和高度都設(shè)置為200px，border-radius屬性設(shè)置為50px，即圓角的半徑為50px，這樣，div元素就會(huì)呈現(xiàn)出一個(gè)邊長(zhǎng)為200px的圓角矩形。

需要注意的是，如果div元素的寬度和高度不同，那么生成的圓角矩形就會(huì)呈現(xiàn)出一個(gè)橢圓形的形狀，如果想要生成一個(gè)真正的圓角矩形，需要確保元素的寬度和高度相同。

border-radius屬性還可以接受其他類型的值，如百分比等，如果想要生成一個(gè)邊長(zhǎng)為200px且圓角半徑為50%的圓角矩形，可以編寫如下CSS代碼：

div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

在上面的代碼中，border-radius屬性設(shè)置為50%，即圓角的半徑為元素寬度的50%，這樣，div元素就會(huì)呈現(xiàn)出一個(gè)邊長(zhǎng)為200px且圓角半徑為50%的圓角矩形。