常用的css样式

一、修改滚动条样式

// -webkit-scrollbar ​滚动条整体部分
​// -webkit-scrollbar-button​ 滚动条两端的按钮
// ​-webkit-scrollbar-track ​外层轨道
// ​-webkit-scrollbar-track-piece​ 内层轨道，滚动条中间部分（除去）
// ​-webkit-scrollbar-thumb​ 内嵌滑块
// ​-webkit-scrollbar-corner​ 边角
​// -webkit-resizer ​定义右下角拖动块的样式

    &::-webkit-scrollbar {
      // 背景:滚动条整体部分
      width: 7px;
      height: 9px;
      background-color: #e9f0ff;
      // border: 1px solid red !important;
    }
    &::-webkit-scrollbar-thumb {
      // 滚动条内嵌滑块
      // border: 1px solid blue !important;
      background: rgba(144, 147, 153, 0.3);
      // border: 1px solid rgba(144, 147, 153, 0.3);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-track {
      // border: 1px solid yellow !important;
      // 滚动条外层轨道
      border-radius: 3px;
      // background: rgba(255, 255, 255, 1);
      background: #e9f0ff;
    }

二、div上增加三角标

.div {
        position: absolute;
        top: -50%;
        width: 80px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid #c2b6b6;
        background: #c2b6b6;
        // padding: 4px 6px;
        &::before {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 0;
          border: 10px solid;
          border-color: #c2b6b6 transparent transparent;
        }
      }