顏色填充CSS怎么寫代碼

在CSS中，我們可以使用fill屬性來填充顏色，這個(gè)屬性可以將指定的顏色應(yīng)用到元素上，從而改變?cè)氐耐庥^，下面是一個(gè)簡(jiǎn)單的例子，展示如何使用fill屬性來填充顏色：

.shape {
  width: 100px;
  height: 100px;
  background-color: #ff0000; /* 填充紅色 */
}

在上面的代碼中，我們定義了一個(gè)名為.shape的類，并將寬度和高度設(shè)置為100像素，我們使用fill屬性將背景顏色設(shè)置為紅色（#ff0000），這樣，所有使用這個(gè)類的元素都將具有紅色的背景。

除了使用固定的顏色值外，我們還可以使用CSS變量來定義顏色，這樣，我們就可以在多個(gè)地方重復(fù)使用相同的顏色值，而無需重復(fù)編寫代碼。

:root {
  --main-color: #ff0000; /* 定義主顏色為紅色 */
}
.shape {
  width: 100px;
  height: 100px;
  background-color: var(--main-color); /* 使用主顏色填充 */
}

在上面的代碼中，我們首先在:root偽元素中定義了一個(gè)名為--main-color的CSS變量，并將其值設(shè)置為紅色（#ff0000），在.shape類中，我們使用var()函數(shù)將這個(gè)變量作為背景顏色，這樣，所有使用這個(gè)類的元素都將具有與:root偽元素中定義的顏色相同的背景。