突然安排让速写这样的一个布局，重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。

注：订单里面的金额都是随意写的

  
    
    机票订单详情
    
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
      }
      .passenger-box {
        display: flex;
        width: 100%;
        margin-top: 16px;
      }
      .passenger-info {
        display: flex;
        width: 100%;
      }
      .passenger-box .title {
        width: 36px;
      }
      .passenger-box .dashed {
        background: repeating-linear-gradient(
          to right,
          #000,
          #000 3px,
          transparent 7px
        ); /* 创建一条虚线背景 */
        height: 1px; /* 设置元素的高度为1像素 */
        flex: auto;
        margin-top: 10px;
      }
      .passenger-box .price {
        text-align: right;
      }
      .passenger-box .passenger {
        text-align: right;
        width: 56px;
      }
      .cate-box {
        display: flex;
        margin-top: 16px;
        justify-content: space-between;
      }
      .cate-box .price{
        margin-right: 50px;
      }
      .total-line {
        background: repeating-linear-gradient(
          to right,
          #000,
          #000 3px,
          transparent 7px
        ); /* 创建一条虚线背景 */
        height: 1px; /* 设置元素的高度为1像素 */
        margin-top: 20px;
      }
      .total {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
      }
      .total-price {
        color: #ff6600;
      }
    
  
  
    
订单详情
    

      

        
成人
        

        
￥9999
      
      
X1人
    
    

      
机票
      
￥899
    
    

      
机建
      
￥50
    
    

      
燃油
      
￥70
    
    

      

        
儿童
        

        
￥9999
      
      
X1人
    
    

      
机票
      
￥8888
    
    

      
机建
      
￥50
    
    

      
燃油
      
￥70
    
    

    

      
订单金额总计
      
￥1050
    
  

重点介绍一下虚线的实现的css代码

 background: repeating-linear-gradient(to right, #000, #000 3px, transparent 7px); /*创建一条虚线背景 */
 height: 1px; /* 设置元素的高度为1像素 */

主要是 background: repeating-linear-gradient(to right, #44928E, #44928E 15px, transparent 15px, transparent 20px);

属性说明：

to right 渐变色的方向

#44928E, #44928E 渐变色的颜色数值，

15px, transparent 15px 虚线的线条渐变的色值的宽度及虚线的宽度，不需要渐变的话这两个值设置成一样就行，就是虚线的宽度

transparent 20px 虚线的间隔

如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。