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="width:70px;text-align:justify">版本号:</span> <span>V1.0</span> </li> <li> <span class="letter" style="width: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; }