在 HTML 中绘制矩形的四种简单方法

kazi02 · 发表于 2024-1-10 16:57:33

在本文中，我们将介绍在 Web 上绘制形状的四种基本方法：通过 HTML 和 CSS、仅使用 CSS、使用 SVG 以及使用 HTML canvas 元素。 Backward Skip 10s Play Video Forward Skip 10s 目录使用 HTML 和 CSS 绘制矩形使用 HTML 和 CSS 创建形状非常容易。我们可以获取一个元素，例如 div，给它一个宽度和高度，也许是一个边框和/或一个背景颜色，然后我们就完成了： div { width: 500px; height: 200px; border: 10px solid #2196F3; background-color: #f7f7f7; } 下面的笔显示了结果。 Learn to Code with JavaScript 注意：在上面的示例中，div 使用 CSS Grid 居中。当然，如果我们愿意，我们可以将内容放置在该矩形内。在上面的笔中尝试一下。我们还可以借助该border-radius属性绘制其他形状

如圆形： div { width: 200px; height: 200px; border: 10px solid #f32177; background-color: #f7f7f7; border-radius: 50%; } 我们还可以画一个椭圆： div { width: 500px; height: 200px; border: 10px solid #f37f21; background-color: #f7f7f7; border-radius: 50%; } Learn to Code with JavaScript 我印度手机号码列表们甚至可以尝试更奇怪的形状，如下所示： div { width: 200px; height: 200px; border: 10px solid #ed21f3; background-color: #f7f7f7; border-radius: 50% 25%; } 进一步阅读：了解有关如何使用 border-radius 属性的更多信息。如何单独使用 CSS 绘制矩形在上面的示例中，我们使用 HTML 元素来创建形状。现在我们只使用 CSS。为此，我们将使用 CSS::before伪元素。（我们可以用::after它来代替。

Learn to Code with JavaScript 我们可以这样做：我们正在创建一个附加到该元素的伪元素<body>，然后为其设置样式，就像我们对上面的 div 所做的那样。我们还可以这是如何创建矩形的简单示例： Learn to Code with JavaScript通过在属了解HTML 和 CSS 绘制矩形使用 HTML 和 CSS 创建形状非常容易。我们可以获取一个元素，例如 di有关如何使用 border-radius 属性的更性的引号之间放置文字、图像等们甚至可以尝试更奇怪的形状，如下所示： div来向此形状添加内容content，例如content: 'This is some content!'。进一步阅读：您可以在我们的CSS 伪元素指南中了解有关CSS 伪元素的::before更多信息。::after 如何使用 SVG 绘制矩形 SVG 允许我们在 HTML 中创建非常复杂的形状。

		自动登录	找回密码
密码			注册