CSS是前端開發中非常重要的一種技術，它可以幫助我們實現各種各樣的布局效果。其中一個非常常見的效果就是樹狀圖，本文將介紹如何使用CSS實現樹狀圖。

首先，我們需要準備一些HTML代碼，用來表示樹狀圖的結構。下面是一個簡單的例子：

<div class="tree">
<ul>
<li>
Parent Node
<ul>
<li>Child Node</li>
<li>Child Node</li>
<li>
Grandchild Node
<ul>
<li>Great Grandchild Node</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

上面的代碼中，我們使用了HTML的

和
• 標簽來表示樹狀圖的結構。其中，每一個
• 表示一個節點，而每一個
  表示該節點的子節點列表，我們可以通過嵌套多個
  和
  • 來表示一個復雜的樹形結構。

    接下來，我們需要使用CSS來美化這個樹狀圖。下面是一些簡單的CSS代碼：

    .tree li {
    list-style-type: none;
    margin: 0;
    padding: 10px 5px;
    position: relative;
    }
    .tree li:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    border-left: 1px solid #ccc;
    }
    .tree li:last-child:before {
    height: 30px;
    bottom: auto;
    }
    .tree li:after {
    content: "";
    position: absolute;
    top: 15px;
    left: -12px;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    }
    .tree li:last-child:after {
    top: -15px;
    }

    上面的代碼中，我們為每一個li元素設置了一些基本的樣式，包括去除列表標記、設置邊距、位置以及背景顏色等。另外，我們還使用了:before和:after偽元素來實現節點之間的連線和圓形節點，這些偽元素可以實現非常強大的效果。

    最后，我們將上述HTML和CSS代碼組合起來，即可得到一個看起來非常不錯的樹狀圖。通過調整CSS代碼，我們還可以實現更加高級的效果，比如折疊和展開節點、節點點擊事件等等，這些都可以根據實際需要來實現。