CSS控件樹效果很常見，在網頁設計中起到了很大的作用。控件樹可以清晰地展示頁面結構和層次，方便用戶理解和操作。

.tree {
position: relative;
overflow: hidden;
}
.tree ul {
padding: 0;
margin: 0;
list-style:none;
}
.tree ul li {
position: relative;
margin: 0;
padding: 20px 5px 0px 5px;
}
.tree ul li:before, .tree ul li:after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree ul li:after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree ul li:last-child:before {
border: 0;
}
.tree li a {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
color: #333;
font-size:14px;
text-decoration:none;
}
.tree li a:hover {
background-color:#6d9eeb;
color:#fff;
}

以上代碼實現了一個簡單的控件樹效果。.tree為包含整個控件樹的容器，ul為列表，li為單獨的節點。節點之間的連線通過:before和:after偽類實現，設置border-top、border-left和width等屬性。葉子節點用a標簽表示。hover效果可以根據需要進行更改。

綜上，CSS控件樹效果是一種簡潔、實用的網頁設計元素，在頁面中廣泛應用。