CSS 有一些鲜为人知但有用的功能。我们将研究其中的一些。

1. CSS的scroll-snap-type属性和scroll-snap-stop属性

滚动快速停止

当为父元素下的每个子元素设置此属性时，当您快速滚动屏幕时，使用触控板或触摸屏快速滚动时将阻止下一个元素通过。

Gif :

例子 ：

价值 ：

• 正常：这是默认值。滚动是默认行为

• 始终：使用触摸板或触摸屏快速滑动后，滚动停止，下一个元素捕捉到焦点。

滚动捕捉类型属性

水平拖动滑块，松开即可看到效果。
当您单击一个框，然后使用左右箭头键进行导航时，就会出现这种效果

Gif :

例子 ：

价值 ：

• 无：这是默认值

• X ：效果设置在 x 轴上

• Y ：在 y 轴上设置效果

• 两者：在x轴和y轴上设置效果

• 强制 ：滚动结束后，滚动自动移动到捕捉点

2. CSS place-items 属性

为 place-items 属性设置的值将应用于 align-items 和 justify-items 属性。

例子 ：

价值 ：

• 开始： 在网格单元格的开头对齐项目

• End : 在网格单元末尾对齐项目

• Center : 将项目对齐到网格单元的中心

3.CSS所有属性

将应用于元素或其父元素的所有属性更改为其初始值

例子 ：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

价值 ：

• Unset ：将应用于元素或元素父级的所有属性更改为其父值（如果可继承）或更改为其初始值（如果不可继承）

4. CSS用户选择属性

阻止用户选择文本

例子：

The text of this div element cannot be selected.

5. CSS caret-color 属性

更改文本输入字段中光标（插入符号）的颜色。

6. CSS text-decoration-skip-ink 属性

text-decoration-skip-ink CSS 属性指定当通过线条和下划线传递字形时如何绘制上划线和下划线。

价值 ：

• 没有任何：

例子 ：

text-decoration-skip-ink: none;

• 汽车：

例子 ：

text-decoration-skip-ink: auto;

7.CSS指针事件属性

pointer-events 属性定义元素是否对 指针事件做出反应.

例子 ：

Google


 Google

价值：

• 无：默认

• 自动：元素不对指针事件做出反应

结论

我们研究了 CSS 鲜为人知的功能。我们了解了对您的应用程序有用的功能。