在web開發(fā)中，CSS作為頁面布局和樣式設計的重要工具之一，常常被廣泛應用。今天我們將討論如何使用CSS設計一個太極圖，并將其應用于HTML3文檔中。

/* 太極圖CSS樣式 */
#taiji {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to bottom, #000000 50%, #FFFFFF 50%);
}
#taiji::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
border-radius: 50%;
background: #000000;
}
#taiji::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
border-radius: 50%;
background: #FFFFFF;
}
#taiji div {
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
border-radius: 50%;
background: #000000;
}
#taiji div::before {
content: '';
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0;
left: 0;
border-radius: 50%;
background: #FFFFFF;
}
#taiji div:first-child {
transform: rotate(45deg);
}
#taiji div:last-child {
transform: rotate(-45deg);
background: #FFFFFF;
}
#taiji div:last-child::before {
background: #000000;
}

上述代碼中，我們使用了CSS中的偽元素來實現太極圖的黑白兩面。同時，我們使用div元素來實現太極圖的兩個小圓點，并通過旋轉來進行位置調整。

在HTML3文檔中，我們可以通過div元素的id屬性將CSS樣式應用于太極圖元素之上。如上述代碼所示，我們在HTML文檔中使用了一個div元素，并給其添加了id屬性值為“taiji”，從而實現通過CSS樣式來指定該元素的樣式效果。

總的來說，通過CSS樣式的應用，我們可以輕松地實現各種圖形的排版和設計。同時，在HTML文檔中應用CSS樣式時，不僅能夠提高頁面的美觀程度，也能夠為用戶提供更好的用戶體驗。