有用的CSS代码块

一. 页面控制

（1）美化滚动条

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条，如果需要的话 */
  }
}

（2）禁止选中

html{
  user-select: none;
}

（3）禁止调整元素大小

textarea{
  resize: none;
}

（4） 灰色风格

html{
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

二. 文本类

1. 文本溢出

（1）单行文本溢出显示省略号

overflow: hidden;// （文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap;// （设置文字在一行显示，不能换行）
text-overflow: ellipsis;// （规定当文本溢出时，显示省略符号来代表被修剪的文本）

（2）多行文本溢出显示省略号

-webkit-line-clamp: 2;// （用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
display: -webkit-box;// （和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical;// （和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
overflow: hidden;// （文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis;// （多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)

2.文本不换行

（1）中文不换行

white-space: nowarp;

（2）英文不换行

word-break:break-all;

（3）溢出隐藏

overflow:hidden;

（4）溢出省略

text-overflow:ellipsis;

三. 标签

1.特定元素处理

（1）盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
/*
属性值：

h-shadow：是指 阴影水平偏移量 ,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边

v-shadow：是指 阴影的垂直偏移量 ，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部

blur：阴影模糊半径；此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊

spread：阴影扩展半径；此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小

color：阴影颜色；此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数

inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。
*/

（2）输入光标颜色

input{
  carest-color: red;
}

（3）子元素居中

div{
  display: flex;
  align-items: center;
  justify-content: center;
}

（4）标签形状改变

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
/* 推荐使用clip-path-maker 的工具 */

（5）标签翻转后隐藏

backface-visibility: hidden;

（6）元素混合到另一个元素的方式

mix-blend-mode: overlay;// normal 、 multiply 、 overlay 、 screen

（7）背景与背景的混合

background: url("tree.png"), url("paper.png");
background-blend-mode: normal;