css的不常用技巧

1. 阻止鼠标选择文本

.no-select { user-select: none }

2. 保持宽高比

.aspect-ratio { aspect-ratio: 16 / 9 }

3. 开启平滑滚动

html { scroll-behavior: smooth }

4. 深色模式

@media（prefers-color-scheme: dark）｛
  body ｛
    background-color：#333；
    color：#fff；
  ｝
｝

5. 图片填充方式

.cover-img { object-fit: cover }

6. 鼠标事件触发禁止

.no-pointer { pointer-events: none }

7. 空内容元素选择器

.element:empty { display: none }

8. has选择器

form:has(input:invalid) { 
     background: red; 
}
form:not(:has(input:invalid)) { 
     background: green 
}

9. 浏览器缩放

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

10. 点击区域大小增加

. icon-clear｛
  width: 16px；
  height: 16px；
  border:11px solid transparent
｝

11. 输入框光标颜色

input{
  caret-color:#ff0000;
}

12. radio 颜色

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

13. 单词换行添加横线

div{
  hyphens: auto;
}

14. 文字段落前后添加符号

q{
  quotes:"*" "*";
}

15. 文字环绕图片

image{
  shape-outside: circle（50%）
}

16. 毛玻璃质感

.container｛
   background-color: rgba（255,255,255,0.05）；
   backdrop-filter: blur（10px）；
｝

17. 鼠标悬停在元素兄弟上

.item:hover ~ .item { transform: scale(1.1); }