html矩形圆角

时间:2023-06-27 16:24:29

HTML 中创建一个具有圆角的矩形,你可以使用 CSS 的 border-radius 属性。

下面是一个示例,展示如何在 HTML 中创建一个带有圆角的矩形:

<style>
.rounded-rectangle {
width: 200px;
height: 100px;
border-radius: 10px;
background-color: #000;
}
</style>

<div class="rounded-rectangle">
这是一个带有圆角的矩形。
</div>

在上面的示例中,我们创建了一个 CSS 类名 .rounded-rectangle,并设置了矩形的宽度为 200 像素、高度为 100 像素。然后,我们将 border-radius 属性设置为 10px,这会使矩形的四个角都呈现圆角效果。

最后,我们给矩形添加了一个背景色,这里使用的是黑色 (#000),你可以根据需要修改背景色。

通过以上代码,你可以在 HTML 中创建一个具有圆角的矩形。请注意,border-radius 属性的值决定了圆角的大小,你可以根据需要进行调整。

相关词 圆角