CSS是一種用于設計網頁樣式的語言，可以實現各種炫酷的效果，例如樹形圖。樹形圖是一種將數據結構用樹的形式進行呈現的圖形展示方式，可以方便用戶快速地理解數據結構的層次結構。下面我們就來看一下如何使用CSS實現樹形圖。

/* 樹形圖的CSS樣式代碼 */
.tree {
margin: 0;
padding: 0;
list-style: none;
position: relative;
text-align: center;
}
.tree li {
display: inline-block;
vertical-align: top;
text-align: center;
position: relative;
padding: 20px 5px 0 5px;
}
.tree li::before,
.tree li::after {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree li.active {
background-color: #e3e3e3;
}

以上代碼中，我們使用了<ul>和<li>標簽來展示樹形結構，<li>代表一個節點，<ul>代表整個樹形結構。通過設置display: inline-block;來讓每個節點在同一行展示，而position: relative;和position: absolute;則用來設置節點先后順序和連接線的位置。

通過以上CSS樣式代碼的設置，我們可以很容易地實現一個簡單的樹形圖效果。如果需要更加具體的樣式效果，可以根據需要自行修改CSS代碼。