CSS 奇技淫巧
以下是一些常用但高效的 CSS 技巧，它们能够帮助你在前端开发中减少 JavaScript 代码，使代码更简洁，并提升用户体验。
1. 阻止鼠标选择文本
.no-select {
user-select: none;
}
阻止用户在页面上选择文本，适用于不可编辑的界面元素。
2. 响应式文字大小
通过 calc 动态调整字体大小：
.fluid {
font-size: 32px;
}
@media screen and (min-width: 568px) {
.fluid {
font-size: calc(32px + 16 * ((100vw - 568px) / (768 - 568)));
}
}
@media screen and (min-width: 768px) {
.fluid {
font-size: 48px;
}
}
利用 clamp 实现响应式字体大小：
.responsive-text {
font-size: clamp(16px, 2.5vw, 48px);
}
3. 设置宽高比
使用 aspect-ratio 轻松设置元素的宽高比：
.aspect-ratio {
aspect-ratio: 16 / 9;
}
4. 自动平滑滚动
html {
scroll-behavior: smooth;
}
当用户点击锚点或使用滚动导航时，实现平滑的滚动效果。
5. 响应式系统深色模式
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
}
根据用户系统的偏好设置自动切换网站的主题颜色。
6. 图片填充方式
.cover-img {
object-fit: cover;
}
确保图片在容器中以适合的方式展示。
7. 禁止鼠标事件触发
.no-pointer {
pointer-events: none;
}
禁用鼠标事件，常用于不可点击的装饰性元素。
8. 模糊背景或元素
.blur {
filter: blur(20px);
}
为背景或元素添加模糊效果，常用于视觉特效。
9. 动态显示 HTML 属性内容
.dynamic-content::before {
content: attr(class);
}
无需更改 HTML，通过 CSS 提取并展示属性的值。
10. 路径剪辑
.circle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
通过 clip-path 定义多边形剪辑路径，可以在线生成形状：Clippy
11. 渐变文本
.gradient-text {
background: linear-gradient(to top, red 0%, blue 100%);
color: transparent;
-webkit-background-clip: text;
}
为文本添加渐变效果，使其看起来更加时尚。
12. 首字母样式
p::first-letter {
font-weight: bold;
color: #333;
}
为段落的首字母设置特定样式。
13. 选择空内容元素
.element:empty {
display: none;
}
隐藏没有内容的 HTML 元素。
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%),
linear-gradient(0deg, rgba(170.2, 106.8, 238.7, 1) 0%, rgba(162.6, 112.6, 178.8, 1) 100%);
添加多层渐变，丰富背景的视觉效果。
16. 使用 :has 选择器
figure {
background: white;
}
figure:has(img) {
background: grey;
}
根据子元素的存在情况应用样式（仅部分浏览器支持）。
17. 浏览器缩放
body {
font-size: calc(100% * env(browser-zoom-level));
}
根据用户缩放浏览器的情况动态调整字体大小。
18. 优雅地增加点击区域大小
.icon-clear {
width: 16px;
height: 16px;
border: 11px solid transparent;
}
通过 border 增加点击区域而不会影响布局。
19. 改变输入框光标颜色
input {
caret-color: #ff0000;
}
自定义输入框的光标颜色。
20. 改变 Radio 选择器的高亮色
.input-radio {
accent-color: #ff00bf;
}
自定义 Radio 选择器的选中颜色。
21. Hyphens 自动添加连字符
div {
hyphens: auto;
}
自动在长单词换行时添加连字符。
22. 引号符号
q {
quotes: "“" "”";
}
为 q 标签内容前后自动添加引号符号。
23. 文字环绕
通过 text-wrap 和其他布局方式，优化文字显示效果。
这些 CSS 技巧能够帮助你更有效地开发复杂布局，提升网站的响应性和用户体验。