關於元素如何顯示部分邊框線

怎麼顯示一半的邊框線 || 部分border || 畫樹圖的連線線

這裡用到 ，支援的瀏覽器Firefox，chrome，Safari，IE不可以。

類似於這樣的半根邊框線：

急著做專案的同學，一目瞭然的程式碼拿走拿走：

.XXX {
  border-left: 1px solid #bbd9fd;
  border-image: -webkit-linear-gradient(bottom, transparent 50%, #bbd9fd 50%, #bbd9fd 100%) 1;
}

注：原來border-style屬性一定要寫，會被border-image覆蓋

想了解 border-image 屬性？

https://www.w3school.com.cn/cssref/pr_border-image.asp

詳細的講解看看這個大佬：

https://www.cnblogs.com/wyaocn/p/5813580.html