CSS里圓角矩形怎么做

在CSS中，我們可以使用border-radius屬性來(lái)創(chuàng)建一個(gè)圓角矩形，這個(gè)屬性接受四個(gè)值，分別代表四個(gè)角的半徑大小，如果四個(gè)值都相同，那么四個(gè)角就會(huì)有相同的圓角效果。

下面是一個(gè)簡(jiǎn)單的例子，展示如何創(chuàng)建一個(gè)圓角矩形：

.rounded-rectangle {
  width: 200px;
  height: 100px;
  border-radius: 20px;
  background-color: #f0f0f0;
  border: 2px solid #000;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為.rounded-rectangle的類(lèi)，并設(shè)置了寬度、高度、背景顏色和邊框，***重要的是，我們通過(guò)border-radius屬性將四個(gè)角的半徑設(shè)置為20像素，從而創(chuàng)建了一個(gè)圓角矩形。

您可以將這個(gè)類(lèi)應(yīng)用到您想要?jiǎng)?chuàng)建圓角矩形的HTML元素上。

<div class="rounded-rectangle"></div>

這將創(chuàng)建一個(gè)具有圓角矩形樣式的div元素，您可以根據(jù)需要調(diào)整寬度、高度和半徑大小，以達(dá)到您想要的效果。