CSS div中实现虚线效果

显示效果

实现方法

首先看 html 部分 很简单 直接是一个 div 里面包含字体就行了

有两种实现方式 

第一种方式 使用 border 

代码

      .areaRoad2 {
        position: relative;
        width: 100px;
        height: 200px;
        text-align: center;
        writing-mode: vertical-rl; /* 竖直显示字体 */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
      }
      
      .areaRoad2::before {
        content: ' ';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%; /* 虚线位于 div 的水平中间 */
        border-left: 2px dashed black; /* 画垂直虚线 */
        transform: translateX(-50%); /* 确保线条位于中间 */
      }

但是这种方式好像没有办法实现自定义虚线中间的空隙

第二种方式 使用 background

垂直虚线和水平的差别都不大只是调整了 虚线的方向  

垂直虚线代码

      .areaRoad1 {
        position: relative;
        width: 55px;
        height: 100%;
        text-align: center;
        writing-mode: vertical-rl; /* 竖直显示字体 */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
      }
      
      .areaRoad1::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%; /* 虚线位于 div 的水平中间 */
        width: 1px; /* 线的宽度 */
        background: repeating-linear-gradient(
          to bottom,
          black 0,
          black 10px, /* 线的长度 */
          transparent 10px,
          transparent 30px /* 空隙的长度 */
        );
        transform: translateX(-50%); /* 确保线条位于中间 */
      }
      

水平虚线代码

    .areaRoad4 {
      color: #000;
      // margin-top: 45%;
      position: relative;
      top: 44%;
      left: 10%;
      right: 12%;
      width: 78%;
      height: 20px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    
    .areaRoad4::before {
      content: '';
      position: absolute;
      top: 50%; /* 将虚线垂直居中 */
      left: 0;
      width: 100%; /* 让虚线占据整个宽度 */
      height: 1px; /* 线的高度为1px */
      background: repeating-linear-gradient(
        to right,
        black 0,
        black 10px, /* 线的长度 */
        transparent 10px,
        transparent 30px /* 空隙的长度 */
      );
      transform: translateY(-50%); /* 垂直居中虚线 */
    }