CSS3 樹狀 li 是一種常見的列表樣式，它可以用來創建分層結構和樹形結構。在這篇文章中，我們將介紹如何使用 CSS3 實現樹狀 li 的效果。 首先，在 HTML 中創建一個無序列表，并為其添加類或 ID，如下所示：

<ul class="tree">
<li>列表 1</li>
<li>列表 2
<ul>
<li>子列表 1</li>
<li>子列表 2</li>
<li>子列表 3</li>
</ul>
</li>
<li>列表 3
<ul>
<li>子列表 1</li>
<li>子列表 2</li>
</ul>
</li>
</ul>

接下來，我們可以添加下面的 CSS 代碼來實現樹狀的效果：

.tree, .tree ul {
list-style: none; 
margin: 0; 
padding: 0; 
}
.tree li {
position: relative; 
margin: 0;
padding: 0 1em; 
line-height: 2em; 
color: #333; 
}
.tree li:before {
position: absolute; 
top: 0;
left: 0;
width: 0; 
height: 2em; 
border-left: 1px solid #ccc; 
content: ""; 
}
.tree li:last-child:before {
height: 1em; 
}
.tree li:last-child:after {
height: 1em; 
bottom: 0; 
}
.tree li:after {
position: absolute; 
top: 0;
left: 0;
width: 1em; 
height: 1em; 
border-top: 1px solid #ccc; 
border-right: 1px solid #ccc; 
content: ""; 
transform: rotate(-45deg); 
}
.tree ul li:before {
border-left: 1px solid #ccc; 
height: 2em; 
left: 20px; 
top: .9em; 
}
.tree li.opened:before {
border-left: 1px solid #ccc; 
}
.tree li.opened:after {
transform: rotate(45deg);  
border-top: none; 
border-right: 1px solid #ccc; 
}

通過以上代碼，我們成功的為列表添加了一個樹狀的效果。現在，當我們展開列表時可以看到，子列表會連接到父列表的右側，形成一個樹形的效果。同時，我們還可以通過添加類名來操作列表，使其展開或合并。 總的來說，CSS3 樹狀 li 提供了一種有效的方式來展示有層次關系的列表，如目錄或菜單。希望這篇文章對您有所幫助，如果您有任何問題或建議，請在下方留言。