HTML/CSS嵌套左边框:重复视觉效果

你可以使用 border-left 为了达到你想要的风格。

在评论中回答OP的问题

(一)

ul 它将分别以父ul和所有子ul为目标,以留下一个边界。

ul {
    border-left: 20px solid #000;
}

当向父元素添加左边框时,也会增加子元素的边框。这应该很好

2个) 获取列表的自定义边框-

基本上,我删除了列表的所有填充。 然后添加 20px 左边框 parent list 还有一个 20像素 左边框 致 child list

为了一个 grand-child 程序是一样的,如果你给 保险商实验室 类名-> ,css看起来像-

ul.grandchild li {
    border-left: 30px solid #000;
}

parent 和 child 如下所示-

ul {
  list-style-position: none;
  padding-left: 0;
}


/*
for different border sizes

ul.parent li {
  border-left: 20px solid #000; 
}

ul.child li {
  border-left: 20px solid #000;
}
*/

/* for all ul's with same radius, don't need any specific class */
ul {
  border-left: 20px solid #000;
}

<ul class="parent">
  <li>RPG
    <ul class="child">
      <li>DA</li>
      <li>Bioshock</li>
      <li>
        <ul>
          <li>DA</li>
          <li>Bioshock</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>MOBA
    <ul class="child">
      <li>DOTA</li>
      <li>LoL</li>
    </ul>
  </li>
</ul>