聊聊关于 9 个冷门的css属性

## 1. overscroll-behavior 在移动端浏览器上，当用户滑动到页面的边缘时，通常会出现一个灰色的背景，以示已经到达页面的边缘。但是当我们页面设置了 `overflow: hidden` 属性时，这个灰色背景不会再显示。这时就可以使用 `overscroll-behavior` 属性控制当页面滚动到边缘时的行为。 ```html ``` ## 2. user-select `user-select` 属性用来控制文本内容是否可以被选中和复制。默认情况下，用户可以通过鼠标或按住 `Ctrl(Cmd)` 键进行选择文本，但是在一些特定场景下，这些操作可能会被禁用，例如在游戏中的UI元素上，我们希望用户无法选中，只能通过游戏操作来进行交互。 ```html

无法复制选中

``` ## 3. scrollbar-width `scrollbar-width` 属性可以用来控制滚动条的宽度。在一些浏览器上，滚动条的宽度是不可更改的，但是在一些浏览器上可以进行修改。 ```html ``` ## 4. backdrop-filter `backdrop-filter` 属性可以对元素的背景进行模糊处理。它可以用在一个元素及其子元素们的背景上。与 `filter` 属性不同的是，`backdrop-filter` 的特性主要是在显示中使用，因此使用 `backdrop-filter` 时，需要考虑性能问题。 ```html ``` ## 5. writing-mode `writing-mode` 属性用来控制文本排列方式，例如从上到下，从左到右等等。在中文网页中，最常使用的为 `horizontal-tb`，即从左到右，并从上到下的排列方式。 ```html ``` ## 6. clip-path `clip-path` 属性可以剪裁元素的形状。它可以剪裁圆形、矩形、三角形等等不同的形状，还可以进行复杂的自定义形状的剪裁。 ```html ``` ## 7. mix-blend-mode `mix-blend-mode` 属性用于指定元素的混合模式，即混合元素与父元素的颜色。它可以用来制作出非常炫酷的效果，例如让两个图像混合展示等。 ```html ``` ## 8. animation-fill-mode `animation-fill-mode` 属性可以控制动画在运行前后的值。它有四个取值，分别为 `none`、`forwards`、`backwards` 和 `both`。这个属性值得深入研究，可以实现许多不同的动画展示效果。 ```html ``` ## 9. grid-auto-flow `grid-auto-flow` 属性可以控制网格布局自动生成网格单元格时的排列顺序。`row`、`column`、`dense`等选项可实现不同的排列方式。 ```html ``` 综上所述，以上这些冷门的CSS属性可以为我们的网页增加很多的特效和功能，用好这些属性可以使代码更加优雅，效果更为出彩。