SegmentFault 思否技术周刊 Vol.43 -- 不走寻常路的 CSS
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：大家想看哪些方面的技术内容，可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
SegmentFault_社区周刊
主题技术周刊，每周分享新鲜有趣的技术干货。
推荐阅读
SegmentFault 思否技术周刊 Vol.80 — 玩转新时代前端构建工具
Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue.js 单文件组件（SFC）和 React Fast Refresh 中。
Beverly赞 5阅读 1.3k
还在用 JS 做节流吗？CSS 也可以防止按钮重复点击
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库
XboxYan赞 35阅读 2.6k评论 2
CSS transition 小技巧！如何保留 hover 的状态？
欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页...
XboxYan赞 30阅读 3.9k评论 2
CSS 如何设置自动滚动定位的“安全”间距？
欢迎关注我的公众号：前端侦探介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 {代码...} 这样，在点击a标签时会自动定位到...
XboxYan赞 31阅读 2.5k评论 2
【已结束】SegmentFault 思否写作挑战赛！
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启；挑战赛中包含多个可供作者选择的热门技术方向，根据挑战难度分为多个等级，快来参与挑战，向更好的自己前进！
SegmentFault思否赞 20阅读 5k评论 10
由小见大！不规则造型按钮解决方案
今天，有个群友在群里提问，使用 CSS 能否实现下述这个图形：emmm，中间这个酷似三次贝塞尔曲线的造型，使用 CSS 不太好实现。我的建议是切图实现，然而群友要求一定要用 CSS 实现。虽然麻烦，但是这个图形勉强也...
chokcoco赞 17阅读 1.3k
CSS 如何根据背景色自动切换黑白文字？
在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：
XboxYan赞 19阅读 1.7k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。