概述
HTML 和 CSS 是我們可以創(chuàng)建任何形狀和任何框架的技術(shù)。要?jiǎng)?chuàng)建一個(gè)填充顏色的框可以使用 HTML 來(lái)實(shí)現(xiàn)，因?yàn)槲覀兛梢越柚?HTML 創(chuàng)建一個(gè)簡(jiǎn)單的框框架，并且可以使用 CSS 屬性來(lái)填充顏色。我們還可以使用 HTML“svg”（標(biāo)量矢量圖形）屬性來(lái)繪制一個(gè)框，還可以使用填充顏色屬性來(lái)填充框的顏色。
語(yǔ)法
使用 svg 創(chuàng)建盒子并填充顏色的語(yǔ)法如下所示。其中包含x、y、寬度、高度和填充四個(gè)屬性。因此，x 軸設(shè)置框相對(duì)于屏幕的水平位置，y 軸設(shè)置垂直位置，高度設(shè)置框的高度，寬度設(shè)置框的寬度，填充屬性設(shè)置框內(nèi)的顏色框。
<svg> <rect x=“” y=“” width=“” height=“” fill=“” /> </svg>
登錄后復(fù)制
算法1
在文本編輯器中創(chuàng)建一個(gè) HTML 文件，其中包含 HTML 樣板。
現(xiàn)在將 svg 標(biāo)記添加到 HTML 正文中。
<svg></svg>
登錄后復(fù)制
現(xiàn)在使用 語(yǔ)義標(biāo)記在 svg 標(biāo)記內(nèi)創(chuàng)建一個(gè)框。
<rect/>
登錄后復(fù)制
現(xiàn)在在 標(biāo)記中設(shè)置屬性，例如 x、y、寬度、高度和填充。
<rect width="100" height="100" fill="green" />
登錄后復(fù)制
現(xiàn)在打開(kāi)瀏覽器，您將看到一個(gè)填充顏色的框。
示例 1
在此示例中，我們將使用 HTML svg 標(biāo)簽在 屬性的幫助下繪制一個(gè)框。
<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>
登錄后復(fù)制
算法2
在文本編輯器上創(chuàng)建一個(gè) index.html 文件，并向該文件添加 HTML 樣板
現(xiàn)在將 div 容器添加到 HTML 正文
<div></div>
登錄后復(fù)制
現(xiàn)在將內(nèi)部樣式標(biāo)記添加到 HTML 的 head 標(biāo)記中。
<style></style>
登錄后復(fù)制
現(xiàn)在使用 CSS 樣式屬性設(shè)置框的高度、寬度和顏色。
<style>
div{
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
登錄后復(fù)制
打開(kāi)瀏覽器，盒子創(chuàng)建成功，并填充顏色。
示例 2
在此示例中，我們將創(chuàng)建一個(gè)帶有 HTML div 容器的框，并將使用 CSS 樣式屬性來(lái)填充框中的顏色。
<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>
登錄后復(fù)制
結(jié)論
正如我們使用 svg（標(biāo)量矢量圖形）創(chuàng)建一個(gè)盒子一樣，我們也可以用它創(chuàng)建許多不同的形狀。創(chuàng)建填充顏色的框的最佳方法是使用帶有一些 CSS 樣式屬性的簡(jiǎn)單 div 容器，因?yàn)槭褂?CSS，您可以在單獨(dú)的樣式表中輕松自定義框。在小型項(xiàng)目中，使用 svg 似乎并不困難，但如果您必須多次構(gòu)建相同的盒子，那么多次編寫(xiě)相同的代碼是一項(xiàng)艱巨的任務(wù)。如果您不想更改框的位置，則不必將“x”和“y”屬性與“”一起使用。這些類(lèi)型的框用于加載動(dòng)畫(huà)或可以用作顯示信息的卡片
以上就是你如何在HTML/CSS中創(chuàng)建一個(gè)填充有顏色的盒子？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
