1. flex: 1;和min-width: 0;
-
flex: 1;: 这是一个简写属性，它设置了一个 flex item 的三个 flex 属性：flex-grow,flex-shrink, 和flex-basis。flex: 1;等价于flex: 1 1 0;，这意味着 flex item 在主轴方向上有权利成长（flex-grow: 1），也有权利缩小（flex-shrink: 1），并且其默认基础大小为0（flex-basis: 0）。这就意味着，如果有多个 flex items 都设置了flex: 1;，它们将平均分配容器的空间，不论它们的初始大小是多少。 -
min-width: 0;: 默认情况下，元素的最小内容宽度是由其内容决定的（这被称为 "min-content"）。这意味着，如果一个元素有一个非常长的单词或连续的文本，它可能会溢出其 flex container，尤其是当容器尺寸小于内容尺寸时。min-width: 0;可以防止这种情况发生，因为它允许元素的宽度小于其内容的宽度，这样元素就可以正确地在 flex container 中缩小。
2. object-fit: cover;
- 这个属性在处理图片或视频的尺寸和比例问题时非常有用，尤其是在响应式设计中。例如，你可能有一个正方形的容器，但是你要在其中显示一个宽屏比例的图片。使用 object-fit: cover; 可以确保图片始终填满容器，同时保持其原始的宽高比，不会出现扭曲或拉伸
3. backdrop-filter: saturate(180%) blur(5px);
背景滤镜效果，还有滤镜filter属性
saturate(180%)：这会增加元素背景的颜色饱和度。数值越高，颜色的饱和度就越高。在这个例子中，颜色饱和度被增加了80%（因为100%表示原始的饱和度，所以180%表示增加了80%的饱和度）。blur(5px)：这会对元素背后的内容应用5像素的高斯模糊效果。
4. display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
多行文本溢出...
5. box-shadow: inset 0 -1px 0 0 #eaeaea;
内阴影还可以模拟边框效果
6. -webkit-overflow-scrolling: touch;
让滚动更丝滑
7. will-change: transform;
使用GPU加速，优化动画性能
8. font-size: calc(100vw * 16 / 375);
设置html根元素字体大小，使用vw适配移动端布局，配合tailwind使用（px自动转rem），使用非常nice.
9. @supports 检查浏览器是否支持某个 CSS 属性或值
// 注视掉，有的安卓手机支持，且环境变量为0
/* @supports (padding-top: env(safe-area-inset-top, 20px)) {
.safe-top {
padding-top: env(safe-area-inset-top, 20px)!important;
}
} */
10. 模拟抖音直播间弹幕顶部渐变效果
-webkit-mask: -webkit-linear-gradient(bottom, black 90%, rgba(0, 0, 0, 0));
11. scroll-behavior: smooth;
scroll-behavior: smooth; 是 CSS 属性，用于控制页面滚动时的动画效果。当用户点击超链接或使用 JavaScript 调用页面的滚动时，浏览器会平滑地滚动到目标位置。
12. 滚动条样式
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-track {
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
border-radius: 999px;
border: 5px solid transparent;
}
-
::-webkit-scrollbar:- 定义滚动条的宽度和高度。
width: 15px;设置垂直滚动条的宽度。height: 15px;设置水平滚动条的高度。
-
::-webkit-scrollbar-thumb:- 定义滚动条滑块的样式。
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .2);添加内阴影，使滑块具有立体效果。
-
::-webkit-scrollbar-track:- 定义滚动条轨道的样式。
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, .2);添加内阴影，使轨道看起来有深度。
-
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track:- 设置滑块和轨道的圆角和边框。
border-radius: 999px;使滑块和轨道呈现圆形。border: 5px solid transparent;使用透明边框，以确保阴影效果不被遮挡。
