记录--CSS不定期更新

1.消除flex-wrap属性上下距离的方法：align-content: flex-start;
使用前：

使用后：

2.css的渐变颜色动画（背景+文字）
背景：

.background{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Exo", sans-serif;
  color: #fff;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

文字：

.font {
background-image: -webkit-linear-gradient(
      left,
      #147b96,
      #e6d205 25%,
      #147b96 50%,
      #e6d205 75%,
      #147b96
    );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    animation: gradientBG 15s ease infinite;
}

具体效果可以自己验证，文字和背景的区别在于需要用到css的背景绘制区域background-clip

3.滚动条样式（区分X、Y轴的滚动效果）
关于滚动条的样式网上找的教程一大把，但是我想做的效果是隐藏Y轴的滚动条，显示X轴；
区分XY的找了很久都没有具体的说明，后来发现WebKit 里面有细节说明；
:horizontal– 水平伪类适用于任何具有水平方向的滚动条。
:vertical– 垂直伪类适用于任何具有垂直方向的滚动条。
只需要在设置的时候加上伪类就能对X/Y的滚动条进行单独的处理啦

::-webkit-scrollbar {
  width: 5px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar:vertical {
  width: 0;
}