在CSS中，寫八卦圖案是一個非常有趣的事情，因為在八卦圖案中涉及到了不同的形狀和顏色。要寫出一個完美的八卦圖案，需要掌握一些CSS技巧。

/* 八卦圖案 */
.gossip {
width: 200px;
height: 200px;
margin: 0 auto;
border: 4px solid #000;
border-radius: 50%;
position: relative;
background: linear-gradient(to bottom, #fff 50%, #000 50%);
}
.gossip:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px #000;
}
.gossip:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 4px #000;
}

通過上面的CSS代碼，我們可以實現(xiàn)一個八卦圖案。首先，我們定義了一個div元素，并給它一個寬度和高度，還有一個黑色的邊框。然后，我們使用了圓角屬性來呈現(xiàn)圓形的形狀。此外，將div元素的位置屬性設(shè)置為相對，因此我們可以在后續(xù)的偽元素中設(shè)置絕對位置來呈現(xiàn)陰陽兩極。

然后，我們使用了:before和:after偽元素來為八卦圖案添加陰陽兩極。我們首先為:before偽元素設(shè)置了白色背景和黑色的邊框，并使用了CSS盒子陰影屬性創(chuàng)建了一個光暈效果。然后，我們?yōu)?after偽元素設(shè)置了黑色背景和黑色邊框。

這就是寫八卦圖案的全部步驟。希望本篇文章能夠幫助您了解如何使用CSS來呈現(xiàn)八卦圖案。