画一条线竖虚线

最新推荐文章于 2024-10-02 05:39:15 发布

空白_A

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量230

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_56933704/article/details/141026126

版权

画一条竖虚线：如果 background-size: 2px 20px; background-image: linear-gradient(to top, #e6e6e6 0%, #e6e6e6 50%, white 50%); 则白色区域为10px，灰色（#e6e6e6）为10px ,通过调整白色占比可以调整每一段灰色之间的间隔，好处是可以随意调整间距样式等如果用边框border-left：1px dashed pink; 则无法调整间隔区域

 <div class="task-panel-list-item_line"></div>

.task-panel-list-item_line {
  flex-shrink: 0;
  margin: 10px 0;
  width: 2px;
  background-image: linear-gradient(to top, #e6e6e6 0%, #e6e6e6 50%, white 50%);
  background-size: 2px 20px;
  background-repeat: repeat-y;
}