京东案例-快递查询单号（当我们输入单号时，文本框上面自动显示大字号的内容）

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }
    .box1 {
        position: relative;
        width: 200px;
        margin: 100px;
    }
    .box {
        display: none;
       position: absolute;
       top: -40px;
       width: 171px;
       border: 1px solid black;
       box-shadow: 0 2px 4px black;  /* 阴影的制作 */
       line-height: 20px;
       font-size: 18px;
    }
    .box::before{
        
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 20px;
        left: 18px;
        border: 8px solid black;  /* 三角形的制作 */
        border-color: #fff transparent transparent;
        border-style: solid dashed dashed;
        
    }
    
   
   
    
     
    }`
 
    

    

`

总结；重点一个是CSS阴影的的编写，怎么实现倒三角形，
JS利用键盘事件，表单的内容键盘按钮输入以后，自动把表单的值给上面的盒子