css 记录

gap

flex 布局尽量别使用 gap 设置间隙，chrome 需要 84 以上，兼容有问题；

普通流布局可以使用 span 标签；

布局优先考虑使用 flex，flex 可使用定义方向，排序等优势；

grid 布局适用于栅格类的，比如按格子，并且对 gap 适应良好；

aspect-ratio

设置宽高比，chrome 需要 88 以上，兼容有问题；

:in-range 和 :out-of-range 伪类

作用与 input 标签 min max 属性。

/* in-range */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

灰度图

.grayscale-image {
  filter: grayscale(100%);
}

毛玻璃

.glass-effect {
  -webkit-backdrop-filter: blur(6.2px);
  backdrop-filter: blur(6.2px);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
}