如何用CSS寫圓角矩形

在CSS中，我們可以使用border-radius屬性來創(chuàng)建圓角矩形。border-radius屬性可以設(shè)置一個(gè)元素的圓角半徑，從而使其成為一個(gè)圓角矩形。

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

我們可以將以下CSS代碼添加到我們的樣式表中：

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

我們可以將rounded-rectangle類應(yīng)用到我們的HTML元素中：

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

這將創(chuàng)建一個(gè)寬度為200像素、高度為100像素的圓角矩形，您可以根據(jù)需要調(diào)整border-radius屬性的值，以創(chuàng)建不同大小的圓角矩形。

您還可以將border-radius屬性應(yīng)用于其他元素，例如p、h1等，以創(chuàng)建具有圓角的段落或標(biāo)題。

通過使用CSS的border-radius屬性，您可以輕松地創(chuàng)建具有圓角的矩形元素，使您的網(wǎng)站更加獨(dú)特和吸引人。