关于元素如何显示部分边框线 怎么显示一半的边框线 部分border 画树图的连接线

关于元素如何显示部分边框线

怎么显示一半的边框线 || 部分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

-webkit 是个啥前缀？

https://www.cnblogs.com/hz-blog/p/5142139.html