css 特殊用法

阻止鼠标选择文本

阻止用户在页面上选择文本。

.no-select { user-select: none }

禁止鼠标事件触发

该css可以使元素忽略鼠标事件，比如点击，hover等等

.no-pointer { pointer-events: none }

自动平滑滚动

锚点或者导航会轻柔的滑动，而不是默认的突然调转，小小的改变带来很大的用户体验。

html { scroll-behavior: smooth }

响应式系统深色模式

该css媒体查询可以设置用户系统偏好自动将您网站的主题设置为自定义样式。

@media (prefers-color-scheme: dark) {
 body {
    background-color: #333;
    color: #fff;
  }
}

模糊背景或者元素

.blur { filter: blur(20px) }

input 光标颜色

input{
  caret-color:#ff0000;
}

radio 选择高亮色

.input-radio{
  accent-color:#ff00bf
}

hyphens 单词换行连字符

当单词太长不得不断词换行时，会自动添加“-”连字符。

div{
  hyphens: auto;
}