前言 还记得你第一次写CSS时的样子吗？一个属性一个属性地敲，一个颜色一个颜色地复制，改个主题色就像在玩“大家来找茬”。昨天学了Sass基础，你已经能像模像样地用变量和嵌套了，感觉自己有点东西了是吧？

CSS Modules中文叫做CSS模块。默认情况下，我们定义的CSS类名标识符是全局的。使用CSS Modules之后，每个类名将变为唯一的全局名称，包含不会重复的哈希值。

在 CSS 中，:nth-child() 是一个非常强大的选择器。它允许我们根据元素在父元素中的位置，按照一定的规律选择元素，例如 :nth-child(2n) 、:nth-child(3n + 1)

#### 现象：图标乱码 参与做的Vue2+elementUI的项目中，图标偶尔会出现乱码的情况（刷新后就正常了）

字体图标是前端显示图标的解决方案之一，但是在前端项目中偶然会出现图标乱码的情况，本文简要分析了乱码原因并总结了三种有效的解决方案。

在 CSS 中，:is() 是一个非常实用的函数型伪类，它可以帮助我们简化和合并选择器。很多 Web 开发者都会用它来减少重复代码，让选择器更简洁、更易读。 例如： 可以使用 :is() 改写为： 这

CSS的clamp()函数能让你用一行代码实现平滑的响应式效果。无论是字体大小、容器宽度还是间距，它都能在设定的最小值和最大值之间智能调整，告别繁琐的媒体查询，让网页在任何设备上都看起来刚刚好。

在日常前端开发中，我们往往只使用了CSS的冰山一角。经过多个项目实践，我发现现代CSS隐藏着许多实用但被忽视的特性，掌握它们真的能让你少写50%的代码！ 下面这12个神技，特别是第3个和第7个，彻底改

本文主要介绍了overflow、transition、导航条、hover、z-index、文本换行、鼠标样式、固定背景、透明度、元素隐藏、滤镜、背景渐变的相关知识。