<div>標簽是HTML中的一個重要元素，用于定義一個文檔的區域。除了作為布局的基礎之外，<div>標簽還可以借助CSS實現更多的妙用。通過給<div>標簽添加樣式，我們可以輕松地改變其外觀，實現各種各樣的效果。
下面我們來介紹幾個<div>標簽與CSS相結合的案例。
第一個案例是實現一個居中顯示的<div>。有時候，我們希望一個<div>在頁面中水平居中顯示，可以使用以下的CSS樣式實現：

div.center {
width: 200px;
height: 200px;
background-color: #ff0000;
margin: 0 auto;
}

在這個案例中，我們給<div>設置了一個固定的寬度和高度，并設置了背景顏色。接著，通過設置"margin: 0 auto"，將<div>在水平方向上居中顯示。這樣，我們就實現了一個居中顯示的<div>。
第二個案例是實現一個具有透明背景的<div>。有時候，我們希望一個<div>的內容可以在背景的部分透明顯示，可以使用以下的CSS樣式實現：

div.transparent-background {
background-color: rgba(255, 0, 0, 0.5);
}

在這個案例中，我們設置了一個半透明的背景顏色，通過使用rgba來定義背景顏色的透明度。其中，最后一個參數0.5表示透明度為50%。這樣，我們就實現了一個具有透明背景的<div>。
第三個案例是實現一個帶動畫效果的<div>。有時候，我們希望一個<div>可以具有動畫效果，吸引用戶的注意力，可以使用以下的CSS樣式實現：

div.animation {
width: 200px;
height: 200px;
background-color: #ff0000;
position: relative;
animation: myAnimation 2s infinite;
}
<br>
@keyframes myAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}

在這個案例中，我們給<div>設置了一個固定的寬度和高度，并設置了背景顏色。接著，通過設置"position: relative;"，使<div>相對于其初始位置進行動畫變換。然后，通過設置"animation: myAnimation 2s infinite;"，將一個名為myAnimation的動畫應用于<div>，并設置動畫的持續時間為2秒，無限循環播放。最后，在@keyframes規則中定義了動畫的具體變換過程。這樣，我們就實現了一個帶動畫效果的<div>。
通過以上的案例，我們可以看到<div>與CSS相結合可以實現各種各樣的效果。通過合理地應用樣式，我們可以利用<div>來構建出豐富多樣的頁面布局和效果。希望以上的介紹能夠幫助你更好地理解<div>標簽與CSS的妙用。