[TOC] ## :-: 美化滚动条 ```css @mixin base-scrollbar { &::-webkit-scrollbar { display: block; width: 13px; height: 13px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); background-clip: padding-box; border: 3px solid transparent; border-radius: 7px; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-track:hover { background-color: #f8fafc; } } body { /* 用法 */ @include base-scrollbar; div, textarea { @include base-scrollbar; } } ``` ## :-: float - 清除浮动流 ```css .clear-float::after { /* 设置块级属性 */ display: block; /* 清除浮动流的属性 */ clear: both; /* 添加空文本内容 */ content: ''; } ``` ## :-: 单行打点 (3件套) ```css .text-ellipsis { /* 超出部分隐藏 */ overflow: hidden; /* 文字溢出部分点点... */ text-overflow: ellipsis; /* 文字溢出禁止换行 */ white-space: nowrap; } ``` ## :-: 多行打点展示 ```css @mixin row-dot-show($len){ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $len; } ``` ## :-: 列表滚动条，自动隐藏 (当鼠标 hover 时才显示) ```css @mixin list-scroll-auto($size:0) { overflow-y: hidden; padding-left: $size + 13px; padding-right: $size + 13px; &:hover{ overflow-y: scroll; padding-right: $size; } } ``` ## :-: 列表阴影 (过度显示)  ```css @mixin list-scroll-shadow($size:10px, $zIndex:10) { &::before, &::after{ content: ''; position: sticky; display: block; left: 0; width: 100%; height: $size; z-index: $zIndex; } &::before{ top: 0; background: linear-gradient(#fff, transparent); } &::after{ bottom: 0; background: linear-gradient(transparent, #fff); } } ```