CSS 如何创建一个填充颜色的盒子

HTML和CSS是我们可以使用的技术，可以创建任何形状和任何框架。要创建一个填充有颜色的盒子，可以使用HTML来创建盒子的简单框架，并使用CSS属性来填充颜色。我们还可以使用HTML的“svg”（Scalar Vector Graphics）属性来绘制盒子，并使用填充颜色属性来填充盒子的颜色。

语法

使用svg来创建一个填充有颜色的盒子的语法如下所示。其中包含四个属性：x、y、width、height和fill。x轴设置盒子相对于屏幕的水平位置，y轴设置垂直位置，height设置盒子的高度，width设置盒子的宽度，fill属性设置盒子内部的颜色。

<svg>
   <rect x=“” y=“” width=“” height=“” fill=“” />
</svg>

方法1

在文本编辑器中创建一个带有HTML模板的HTML文件。
现在将svg标签添加到HTML的body中。

<svg></svg>

现在使用<rect>语义标签在svg标签内创建一个矩形。

<rect/>

现在在<rect>标签中设置属性，如x、y、width、height和fill。

<rect width="100" height="100" fill="green" />

现在打开浏览器，你会看到一个填满颜色的方框。

示例1

在这个示例中，我们将使用HTML的svg标签结合属性绘制一个方框。

<html>
<head>
    <title> create box using svg </title>
</head>
<body>
    <h3> Created using svg </h3>
    <svg>
        <rect width="100" height="100" fill="green" />
    </svg>
</body>
</html>

方法2

在文本编辑器上创建一个index.html文件，并在文件中添加HTML模板
现在在HTML的body中添加一个div容器

<div></div>

现在在HTML的头标签内添加内部样式标签。

<style></style>

现在使用CSS样式属性设置盒子的高度、宽度和颜色。

<style>
   div{
      width: 10rem;
      height: 10rem;
      background-color: green;
   }    
</style>

打开浏览器，成功创建一个有颜色填充的框。

示例2

在这个示例中，我们将使用HTML div容器创建一个框，并使用CSS样式属性来填充框的颜色。

<html>
<head>
    <title> create u=box using simple HTML and CSS</title>
    <style>
        div{
          width: 10rem;
          height: 10rem;
          background-color: green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结论

所以当我们使用SVG（可缩放矢量图形）创建一个方框时，我们也可以用它创建许多不同的形状。创建一个有填充颜色的方框最好的方法是使用一个简单的div容器，并添加一些CSS样式属性，因为通过CSS可以很容易地在单独的样式表中自定义方框。在小型项目中，使用SVG似乎并不困难，但如果您必须多次构建相同的方框，那么写多次相同的代码就是一项困难的任务。如果您不想改变方框的位置，就不必在””标签中使用’x’和’y’属性。这种类型的方框常用于加载动画或作为卡片显示信息。