在 HTML 中定義變量有多種方式，其中一種是使用 CSS3 的自定義屬性（Custom Properties）。CSS變量是通過在根元素（:root）或者具體的元素上定義，并使用 var() 函數進行引用的。為了在<div> 元素中使用變量，我們需要在合適的范圍內進行變量定義，然后在<div> 元素的樣式中進行引用。
下面是一個簡單的示例，展示了如何使用變量在<div> 元素的背景顏色中添加一些動態效果：
<style>
:root {
--bg-color: #f00;
}
</style>
<br>
<div style="background-color: var(--bg-color); width: 200px; height: 200px;"></div>在上面的代碼中，我們在根元素中定義了一個名為 --bg-color 的變量，并將其值設置為紅色。然后，在<div> 元素的樣式中使用 var() 函數來引用該變量，從而將背景顏色設置為變量的值。你可以嘗試修改根元素中的變量值，觀察<div> 元素的背景顏色是否相應變化。
除了使用根元素定義變量外，我們也可以在具體的元素中定義變量。這樣做可以為不同的<div> 元素提供不同的樣式，而不必修改全局變量。下面是一個示例，展示了如何在<div> 元素中定義和使用變量：
<style>
div {
--width: 200px;
}
<br>
#div1 {
width: var(--width);
background-color: #f00;
}
<br>
#div2 {
width: calc(var(--width) * 2);
background-color: #00f;
}
</style>
<br>
<div id="div1"></div>
<div id="div2"></div>在上面的代碼中，我們在<div> 元素的樣式中定義了一個名為 --width 的變量，并為其設置了一個初始值。然后，在不同的<div> 元素中使用 var() 函數來引用該變量，實現了不同的寬度效果。你可以嘗試修改變量的值，觀察<div> 元素的寬度是否相應變化。
除了基礎的樣式設置，使用變量還可以實現更復雜的布局和交互效果。下面是一個實際案例，展示了如何使用變量實現一個帶有動態背景圖像的<div> 元素：
<style>
:root {
--img-url: url('example.jpg');
--img-size: 200px;
}
<br>
div {
background-image: var(--img-url);
background-size: var(--img-size) auto;
width: var(--img-size);
height: calc(var(--img-size) / 2);
}
</style>
<br>
<div></div>上面的代碼中，我們在根元素中定義了一個名為 --img-url 的變量，并為其設置了背景圖像的 URL。還定義了一個名為 --img-size 的變量，并為其設置了背景圖像的大小。然后，在<div> 元素的樣式中引用這兩個變量，實現了一個帶有動態背景圖像的<div> 元素。
以上的代碼案例，我們可以看到，在<div> 元素中使用變量可以為我們帶來更靈活的樣式設置和交互效果。無論是簡單的顏色變化，還是復雜的布局和圖像設置，都可以通過變量來實現。希望本文對你理解<div> 元素中變量的使用有所幫助。