CSS (英文全称：Cascading Style Sheets)是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
小编整理了思否社区关于 CSS 的优质技术文章，欢迎大家阅读 ~~
CSS 特性
《2022 年最受瞩目的新特性 CSS @layer 到底是个啥？》
步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。
本文将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。
《革命性创新，动画杀手锏 @scroll-timeline》
在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。
本文将带大家一探究竟，从入门到学会使用 CSS @scroll-timeline。
大部分的编程语言，在语言出现的那一刻就支持变量。但是，CSS 一开始就不支持原生变量。所以大家开始选择 CSS，LESS 等兼容的 CSS 扩展语言。不过庆幸的是 CSS 目前也已经支持变量，下文就来聊一聊 CSS 中的变量。
简写（语法糖）可能给我们的编码带来了很多便利，但凡事都有好有坏，简写也会带来一些问题，所以今天就来讨论一下 CSS 中的简写的 "好" 和 "坏"。
自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）
很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如
2021-12-31 2022-03-03通常的做法是
if (num < 10) { num = '0' + num }后来，JS 中出现了原生的补全方法
padStart()和padEnd()，如下'3'.padStart(2, '0') // 结果是 ’03‘ '12'.padStart(2, '0') // 结果是 ’12‘其实呢，在 CSS 中也是可以实现这样的效果的，并且有多种方案，下面一起看看吧，相信能有不一样的体会
引用
最近在项目中碰到了一个这样的树状结构目录，效果如下
如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~
神奇的 CSS
文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色。
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。
这里，会运用上这样一种纯 CSS 的视差技巧：
1、使用 transform: translate3d 实现滚动视差
2、借助 CSS 视差实现酷炫交互动效
3、CSS 滚动视差动画 2
4、结合 CSS @scroll-timeline，利用 CSS 控制滚动与动画
《巧用 background-clip 实现超强的文字动效》
background-clip: text 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分，配合透明文字 color: transparent，就能够利用文字透出背景。
利用 background-clip: text，能够得到很多非常有意思的文字效果。
简单分析一下，这个交互效果主要有两个核心：
- 借助了 CSS 3D 的能力
- 元素的旋转需要和鼠标的移动相结合
本文将讲述如何使用纯 CSS 实现类似的交互效果，以及借助 JavaScript 绑定鼠标事件，快速还原上述效果。
CSS 阴影的存在，让物体看上去更加有型立体。然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。
本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。
CSS 的艺术
《 使用 CSS 绘制带有动画效果的 React Logo 》
CSS 面试
简单选择器：id选择器、类选择器、标签选择器、
组合选择器：后代选择器（空格）、子选择器（>）、兄弟选择器 （+）、通用选择器（~）
伪类（:hover）
伪元素（::before, ::firt-child，::not()）
属性选择器
ps. 兄弟选择器 （+）与通用选择器（~）： “+”指“自己”相邻兄弟，“~”会应用所有兄弟
引用
FizzBuzz 是一道很有意思的题目。我们来看看题目：
如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。
如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关 CSS 选择器的题目。
PS：大家想看哪些方面的技术内容，可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。