如何使用CSS在两个div之间绘制虚线

当然可以，以下是几种实用的实现方式：

• 边框法（最简单）
  直接给其中一个div添加虚线边框，再调整间距即可模拟两个div之间的虚线：

  <div class="upper-box">上方内容区块</div>
  <div class="lower-box">下方内容区块</div>
  

  .upper-box {
    border-bottom: 2px dashed #ffffff;
    margin-bottom: 12px; /* 控制虚线和下方div的距离 */
  }
  /* 也可以给下方div添加上边框 */
  /* .lower-box { border-top: 2px dashed #ffffff; margin-top: 12px; } */
  

• 伪元素法（无需额外DOM）
  用伪元素生成虚线，避免添加多余的HTML标签：

  <div class="upper-box">上方内容区块</div>
  <div class="lower-box">下方内容区块</div>
  

  .upper-box {
    position: relative;
    margin-bottom: 20px;
  }
  .upper-box::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    border-top: 2px dashed #ffffff;
  }
  

• 渐变自定义法（灵活调整样式）
  如果需要自定义虚线的段长、间距，用线性渐变可以实现更个性化的效果：

  <div class="upper-box">上方内容区块</div>
  <div class="custom-dashed-line"></div>
  <div class="lower-box">下方内容区块</div>
  

  .custom-dashed-line {
    height: 2px;
    background: linear-gradient(to right, #ffffff 60%, transparent 60%);
    background-size: 14px 2px; /* 第一个值=虚线段长度+间距，第二个是线的高度 */
    margin: 10px 0;
  }
  

内容的提问来源于stack exchange，提问作者Igors Maslakovs