概述
HTML 和 CSS 是我們可以創建任何形狀和任何框架的技術。要創建一個填充顏色的框可以使用 HTML 來實現，因為我們可以借助 HTML 創建一個簡單的框框架，并且可以使用 CSS 屬性來填充顏色。我們還可以使用 HTML“svg”（標量矢量圖形）屬性來繪制一個框，還可以使用填充顏色屬性來填充框的顏色。
語法
使用 svg 創建盒子并填充顏色的語法如下所示。其中包含x、y、寬度、高度和填充四個屬性。因此，x 軸設置框相對于屏幕的水平位置，y 軸設置垂直位置，高度設置框的高度，寬度設置框的寬度，填充屬性設置框內的顏色框。
<svg> <rect x=“” y=“” width=“” height=“” fill=“” /> </svg>
登錄后復制
算法1
在文本編輯器中創建一個 HTML 文件，其中包含 HTML 樣板。
現在將 svg 標記添加到 HTML 正文中。
<svg></svg>
登錄后復制
現在使用 語義標記在 svg 標記內創建一個框。
<rect/>
登錄后復制
現在在 標記中設置屬性，例如 x、y、寬度、高度和填充。
<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 樣板
現在將 div 容器添加到 HTML 正文
<div></div>
登錄后復制
現在將內部樣式標記添加到 HTML 的 head 標記中。
<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（標量矢量圖形）創建一個盒子一樣，我們也可以用它創建許多不同的形狀。創建填充顏色的框的最佳方法是使用帶有一些 CSS 樣式屬性的簡單 div 容器，因為使用 CSS，您可以在單獨的樣式表中輕松自定義框。在小型項目中，使用 svg 似乎并不困難，但如果您必須多次構建相同的盒子，那么多次編寫相同的代碼是一項艱巨的任務。如果您不想更改框的位置，則不必將“x”和“y”屬性與“”一起使用。這些類型的框用于加載動畫或可以用作顯示信息的卡片
以上就是你如何在HTML/CSS中創建一個填充有顏色的盒子？的詳細內容，更多請關注www.92cms.cn其它相關文章！
