CSS 樹狀圖是一種常用于展示層級結構的圖形，通常用在網站導航菜單或文件目錄上。

實現CSS樹狀圖的方式有很多，其中一種常用的方式是使用線來連接各個層級，這種方法可以輕松地通過 CSS 繪制出一棵簡潔美觀的樹狀圖。

.tree {
position: relative;
}
.tree ul {
padding: 0;
margin: 20px 0 0 0;
list-style: none;
}
.tree li {
position: relative;
padding: 0 0 20px 45px;
margin-left: 20px;
text-align: left;
line-height: 20px;
}
/* 樹狀圖的線 */
.tree li:before {
content: '';
position: absolute;
top: 0;
left: -20px;
width: 1px;
height: 100%;
border-left: 1px dashed #ccc;
}
/* 樹狀圖的節點 */
.tree li:after {
content: '';
position: absolute;
top: 8px;
left: -20px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ccc;
}

以上代碼實現了一個基本的樹狀圖結構，使用了偽元素:before和:after來繪制線和節點。

通過修改偽元素的位置和大小，可以控制線和節點的樣式，從而實現不同風格的樹狀圖。

需要注意的是，樹狀圖的層級嵌套越深，線的數量和長度也會隨之增加，會對頁面性能和可維護性造成一定的影響，因此在實際開發中需謹慎使用。