查漏补缺的css

1. 多行溢出...显示

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

2. 一行文本超出...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

3. 继承色

border: 1px solid currentColor;

4. css 实现三角形

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}

5. 水平 垂直居中(定位或者 flex)够用就好

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

//  父级控制子集居中
parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

6. calc (css 计算)

width: calc(25% - 20px)

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

7. 滚动条美化

.awesome-scroll{
    scrollbar-color: @primary-color @primary-2;
    scrollbar-width: thin;
    -ms-overflow-style:none;
    position: relative;
    &::-webkit-scrollbar{
      width: 3px;
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: @primary-color;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
      border-radius: 3px;
      background: @primary-3;
    }
}