css常用样式整理

以前写样式时，有几个比较常用的属性经常忘记，烂笔头写下来方便记忆与查询。

浏览器滚动条样式：

::-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);
}