以前写样式时，有几个比较常用的属性经常忘记，烂笔头写下来方便记忆与查询。
浏览器滚动条样式：
::-webkit-scrollbar { /*滚动条整体样式*/
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece { /*滚动条里面轨道*/
background-color: #f8f8f8;
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
background-color: #dddddd;
background-clip: padding-box;
min-height: 28px;
border-radius: 5px;
}
/* ::-webkit-scrollbar-thumb:horizontal {
background-color: #ddd;
} */
::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}
文本溢出隐藏：
.text {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
文本部分拒绝选中：
.text {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
文字方向：
.text {
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
/* 水平方向自上而下 | 垂直方向自右而左 | 垂直方向自左而右 | 内容垂直方向从上到下排列 | 内容垂直方向从下到上排列*/
}
背景颜色渐变：
.text {
/* 线性渐变 */
background-image: linear-gradient(#e66465, #9198e5); /* 从上到下 */
background-image: linear-gradient(to right, red , yellow); /* 从左到右 */
background-image: linear-gradient(to bottom right, red, yellow); /* 从左上角到右下角 */
/* 径向渐变 */
background-image: radial-gradient(red, yellow, green);
}
