HTML 和 CSS 是我們可以創建任何形狀和任何框架的技術。要建立一個填滿顏色的框可以使用 HTML 來實現，因為我們可以藉助 HTML 建立一個簡單的框框，並且可以使用 CSS 屬性來填滿顏色。我們也可以使用 HTML“svg”（標量向量圖形）屬性來繪製一個框，也可以使用填滿顏色屬性來填滿框的顏色。
使用 svg 建立盒子並填滿顏色的語法如下所示。其中包含x、y、寬度、高度和填充四個屬性。因此，x 軸設定框相對於螢幕的水平位置，y 軸設定垂直位置，高度設定框的高度，寬度設定框的寬度，填滿屬性設定框內的顏色框。
<svg> <rect x=“” y=“” width=“” height=“” fill=“” /> </svg>
在文字編輯器中建立一個 HTML 文件，其中包含 HTML 樣板。
現在將 svg 標記加入到 HTML 正文中。
<svg></svg>
現在使用
<rect/>
現在在
<rect width="100" height="100" fill="green" />
現在打開瀏覽器，您將看到一個填滿顏色的方塊。
在此範例中，我們將使用 HTML svg 標籤在
create box using svg
Created using svg
在文字編輯器上建立一個 index.html 文件，並在該文件中新增 HTML 樣板
現在將 div 容器新增到 HTML 正文
<div></div>
現在將內部樣式標記新增到 HTML 的 head 標籤中。
<style></style>
現在使用 CSS 樣式屬性來設定框的高度、寬度和顏色。
<style>
div{
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
開啟瀏覽器，盒子建立成功，並填滿顏色。
在此範例中，我們將建立一個帶有 HTML div 容器的框框，並將使用 CSS 樣式屬性來填入框中的顏色。
create u=box using simple HTML and CSS
<div></div>
正如我們使用 svg（標量向量圖形）來創建一個盒子一樣，我們也可以用它創建許多不同的形狀。建立填滿顏色的方塊的最佳方法是使用帶有一些 CSS 樣式屬性的簡單 div 容器，因為使用 CSS，您可以在單獨的樣式表中輕鬆自訂框。在小型專案中，使用 svg 似乎並不困難，但如果您必須多次建立相同的盒子，那麼多次編寫相同的程式碼是一項艱鉅的任務。如果您不想變更框的位置，則不必將「x」和「y」屬性與「
以上是你如何在HTML/CSS中建立一個填滿有顏色的盒子？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
