1. 阻止鼠标选择文本

.no-select { user-select: none }

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

2. 响应式文字大小

.responsive-text { font-size: clamp(1rem, 2.5vw, 2rem) }

很少有人用clamp做响应式的文字大小设置，此css可以根据视口动态调整字体大小，语法：

clamp(minimum size, preferred size, maximum size)

minimum size：小屏是最小字体大小

preferred size：首选大小，其中vw代表视口宽度，2.5vw表示字体大小将是视口宽度的2.5%

maximum size： 最大字体大小

3. 宽高比

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

讲宽度和高度保持在指定的比例，非常适合使用在视频和图像元素，常用的比如4:3,1:1等等

4. 自动平滑滚动

html { scroll-behavior: smooth }

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

5. 响应式系统深色模式

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

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

6. 图片填充方式

你也可以尝试contain, fill等等

.cover-img { object-fit: cover }

7. 禁止鼠标事件触发

.no-pointer { pointer-events: none }

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

8. 模糊背景或者元素

.blur { filter: blur(20px) }

9. 显示html属性的内容

.dynamic-content::before { content: attr(class) }

无需更改html就可以提取属性中的值

10. 路径剪辑

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

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

11. 渐变文本

.gradient-text {
  background: linear-gradient(to top, red 0%, blue 100%);
  color: transparent;
  -webkit-background-clip: text;
}

12. 首字母

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

13. 选择空内容元素

.element:empty { display: none }

14. 响应式屏幕方向

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

15. 多层渐变背景色

background: radial-gradient(circle at 50% 50%, rgba(243, 196.3, 96.5, 1) 0%,rgba(238.8, 34.6, 122.1, 0.2) 80%) 50% 50%, linear-gradient(0deg, rgba(170.2, 106.8, 238.7, 1) 0%,rgba(162.6, 112.6, 178.8, 1) 100%) 50% 50%;