总结css常用方法

1、自定义滚动条

.test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

 2、字数不同垂直title以冒号对齐方式

css

.detail-message .letter{
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
}
.detail-message .letter:after{
    content:"";
    display: inline-block;
    width:100%;
}

html

 <div class="contactus">
     <ul class="detail-message">
         <li>
             <span class="letter" style="70px;text-align:justify">版本号:</span>
             <span>V1.0</span>
          </li>
          <li>
             <span class="letter" style="70px;text-align:justify">技术支持:</span>
             <span>XXXX</span>
          </li>              
     </ul>
 </div>

3、元素垂水平直居中最简单方法

 flex-direction:column;
    display: flex;
    justify-content:center;
    align-items:Center;
    text-align: center;    

 4、去除input默认背景色

input:-webkit-autofill { 
　-webkit-text-fill-color: #000 !important;
　-webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s; 
}

5、pdf打印合并行后边框消失问题

#fromxml tr:not(:first-child) td {
    position: relative;
    
    
}

#fromxml tr:not(:first-child) td:after {
    position: absolute;
    content: "";
    top: 0;
    left: -1px;
    background-color: black;
    width: 1px;
    min-height: 100%;
}

 6、box-shadow

 box-shadow:-10px 0 10px red, /*左边阴影*/  
            10px 0 10px yellow, /*右边阴影*/  
            0 -10px 10px blue, /*顶部阴影*/  
            0 10px 10px green; /*底边阴影*/  

 7、记住密码去除背景色

 input:-webkit-autofill  {
            -webkit-text-fill-color: #333 !important;
            -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
            background-color:transparent;
            background-image: none;
            transition: background-color 50000s ease-in-out 0s; 
        }
  input {
            background-color: transparent;
            color:#333;
        }