日常开发小问题（CSS）

浏览器滚动条样式

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{
    height: 8px;
    background-color: #f5f5f5;
}
/*定义滚动条的轨道，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{
    height: 8px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #b6b6b6;
}
给对应的dom添加类名 scrollbar 即可

多行溢出打点样式

.line-3{
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 3; /**显示的行数,允许显示几行就写几**/
    overflow: hidden; /**隐藏超出的内容**/
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all; /*允许在单词内换行*/
}

点击穿透

pointer-events: none;/**用来实现水印或蒙层，不影响点击**/

vue全局颜色

/**定义**/
/**app.vue文件mounted钩子函数中声明**/
this.color = 接口返回或定义一个值
document.body.style.setProperty('--color', this.color);
/**使用**/
color: var(--color);

setProperty

纯css实现移动端适配

html {
  margin: 0 auto;
  min-width:375px;
  max-width: 750px;
  font-size: 13.3333vw;
}

@media screen and ( max-width: 375px ) {
  html {
    font-size: 50px;
  }
}

@media screen and ( min-width: 750px ) {
  html {
    font-size: 100px;
  }
}
设计图以750px为基准
设计图30px 对应代码就为 .3rem