此篇文章不考虑css使用兼容的前提记录，自行适配兼容性

基础设置

行内style变量入参&css变量计算

html
// 演示为react写法
// widthStyleCss 为变量声明的值
<div style={{"--widthStyle": widthStyleCss}}></div>

css
div {
    width: calc(var(--widthStyleCss) + 40px);
}

响应式系统深色模式

css
// 使用css媒体查询可以设置用户系统偏好自动将您网站的主题设置为自定义样式。
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

响应式屏幕方向

css
@media (orientation: landscape) {
  body {
    background-color: #333
  }
}

模糊背景

css
.blur { filter: blur(20px) }

毛玻璃质感

css
// 会导致子级固定定位的基准位置
.container{
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

路径剪辑

css
.circle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

这个在线工具可以生成各种形状的剪辑：Clippy - CSS clip-path maker

自动平滑滚动

css
// 锚点或者导航会轻柔的滑动
html { scroll-behavior: smooth }

文字

浏览器缩放

css
body { font-size: calc(100% * env(browser-zoom-level)); }

首字母

css
p::first-letter {
  font-weight: bold;
  color: #333;
}

选择空内容元素

css
.element:empty { display: none }

hyphens单词换行连字符

css
// 当单词太长不得不断词换行时，会自动添加“-”连字符。
div{
  hyphens: auto;
}

引用符合

css
// 可在对应的文字段落前后添加引号
q{
  quotes:"“" "”";
}

事件相关

阻止鼠标选择文本

css
// 阻止用户在页面上选择文本
.no-select { user-select: none }

禁止鼠标事件触发

css
// 该css可以使元素忽略鼠标事件，比如点击，hover等等
.no-pointer { pointer-events: none }

图片相关

宽高比

css
// 宽度和高度保持在指定的比例，非常适合使用在视频和图像元素
.aspect-ratio { aspect-ratio: 16 / 9 }

图片填充方式

css
// contain, fill, cover
.cover-img { object-fit: cover }

表单控件

input光标颜色

css
input{
  caret-color:#ff0000;
}

radio选择高亮色

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