概述
HTML 和 CSS 是我们可以创建任何形状和任何框架的技术。要创建一个填充颜色的框可以使用 HTML 来实现，因为我们可以借助 HTML 创建一个简单的框框架，并且可以使用 CSS 属性来填充颜色。我们还可以使用 HTML“svg”（标量矢量图形）属性来绘制一个框，还可以使用填充颜色属性来填充框的颜色。
语法
使用 svg 创建盒子并填充颜色的语法如下所示。其中包含x、y、宽度、高度和填充四个属性。因此，x 轴设置框相对于屏幕的水平位置，y 轴设置垂直位置，高度设置框的高度，宽度设置框的宽度，填充属性设置框内的颜色框。
算法1
在文本编辑器中创建一个 HTML 文件，其中包含 HTML 样板。
现在将 svg 标记添加到 HTML 正文中。
立即学习“前端免费学习笔记（深入）”；
现在使用 语义标记在 svg 标记内创建一个框。
现在在 标记中设置属性，例如 x、y、宽度、高度和填充。
现在打开浏览器，您将看到一个填充颜色的框。
示例 1
在此示例中，我们将使用 HTML svg 标签在 属性的帮助下绘制一个框。
create box using svg Created using svg
算法2
在文本编辑器上创建一个 index.html 文件，并向该文件添加 HTML 样板
现在将 div 容器添加到 HTML 正文
现在将内部样式标记添加到 HTML 的 head 标记中。
现在使用 CSS 样式属性设置框的高度、宽度和颜色。
div{ width: 10rem; height: 10rem; background-color: green; }
打开浏览器，盒子创建成功，并填充颜色。
示例 2
在此示例中，我们将创建一个带有 HTML div 容器的框，并将使用 CSS 样式属性来填充框中的颜色。
create u=box using simple HTML and CSS div{ width: 10rem; height: 10rem; background-color: green; }
结论
正如我们使用 svg（标量矢量图形）创建一个盒子一样，我们也可以用它创建许多不同的形状。创建填充颜色的框的最佳方法是使用带有一些 CSS 样式属性的简单 div 容器，因为使用 CSS，您可以在单独的样式表中轻松自定义框。在小型项目中，使用 svg 似乎并不困难，但如果您必须多次构建相同的盒子，那么多次编写相同的代码是一项艰巨的任务。如果您不想更改框的位置，则不必将“x”和“y”属性与“”一起使用。这些类型的框用于加载动画或可以用作显示信息的卡片
以上就是你如何在HTML/CSS中创建一个填充有颜色的盒子？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625625.html
微信扫一扫 
支付宝扫一扫 
