CSS樹形分支關系圖常用于展示網頁元素的層級結構，它通過分支、縮進等方式清晰明了地展示頁面元素的親緣關系。下面我們就來看一下該如何使用CSS來創建樹形分支關系圖。

ul {
list-style: none; /* 取消列表標記 */
padding-left: 20px; /* 左側縮進20像素 */
position: relative; /* 設置相對定位 */
}
li:before {
content: "";
position: absolute;
top: 0;
left: -20px; /* 與父級左側對齊 */
border-left: 1px solid #ccc; /* 添加豎線 */
height: 100%; /* 豎線高度100% */
}
li:last-child:before {
height: 50%; /* 最后一個元素豎線高度50% */
}
li:after {
content: "";
position: absolute;
top: 0;
left: -8px; /* 圓形大小為16像素，向左偏移8像素 */
border: 2px solid #ccc;
background-color: #fff;
width: 16px;
height: 16px;
border-radius: 50%; /* 圓形圓角為50% */
}
li:last-child:after {
top: 50%; /* 最后一個元素位置向下偏移50% */
}

以上代碼通過使用偽元素:before和:after，加上相對定位、豎線和圓形樣式等屬性設置，實現了樹形分支關系圖的效果。同時，我們需要使用ul和li標簽來組織層級結構，其中li標簽表示分支節點，ul標簽表示根節點。

總之，使用CSS樹形分支關系圖展示頁面元素的層級結構，有利于提高頁面的可讀性和展示效果，使用戶更易于了解頁面結構的邏輯關系。