PeacefulWinter的博客

本篇为《CSS in Depth》全新第2版附录B部分内容，主要介绍了 CSS 预处理器的相关知识，分别对 Sass、Less、PostCSS 等一系列工具做了概述，并重点针对 Sass 的核心功能进行了较为深入的分析。本篇旨在后续学习过程中，方便查阅书中提到的附录内容，从而更好地掌握各章节知识点。建议收藏。

本篇为《CSS in Depth》全新第2版的附录A部分的内容，主要罗列了绝大部分日常工作中可能出现的CSS选择器，简明扼要阐述其用法及含义，并根据其功能和适用场景作了大致分裂。新版附录中针对近年来新出现的选择器做了大量增补，配合必要的示意图和例子，非常适合对提升CSS基础有需求的朋友，强烈建议收藏。

本篇为《CSS in Depth》全新第2版正文的最后一部分内容，也是第二版全新添加的一个小节，主要介绍了 CSS 新推的 animation-timeline 属性——一个基于页面滚动的动画特效属性。由于当前各主流浏览器尚未全面添加对该特性的语法支持，作者也只是简单用 Chrome 浏览器演示了一个简单示例，并推荐了一篇详细介绍 animation-timeline 用法的一个博客文章，非常值得学习参考、先睹为快。强烈建议收藏。

本篇为《CSS in Depth》全新第2版17.3、17.4节内容，主要介绍了 CSS 动画延迟技术的应用及动画填充模式的设置方法，通过一个典型案例生动讲解了应用 CSS 动画过程中需要注意的一些细节问题。17.4节从增强用户体验的角度，结合一个简化表单的提交案例，进一步强调了 CSS 动画在传递必要反馈信息中的重要作用。新版示例代码整合了全书几乎所有的核心知识点，是对所有讲述的CSS知识点的综合应用，非常适合需要强化 CSS 基础，同时了解 CSS 语法最新动态的朋友学习参考。强烈建议收藏。

本篇为《CSS in Depth》全新第2版17.1和17.2节内容，主要介绍了CSS动画特效中的关键帧概念、用法，并根据上一章演示的示例页面完成了内容卡片飞入特效的视线。新版在前一版的基础上对示例代码进行了全面更新（包括层叠图层的引入、CSS模块概念的应用等），非常适合希望夯实 CSS 动画基础的朋友复习参考。强烈建议收藏，并在本地跟随作者思路实践相关代码。

本篇为《CSS in Depth》全新第2版16.4节内容，主要介绍了 CSS 三维变换的相关概念与具体用法。虽然这部分知识点在实际工作中可能用得不多，但也是 CSS 变换设置的一个重要组成部分，CSS 变换与 CSS 过渡相结合可以实现很多非常不错的视觉特效，而且性能指标也往往非常理想（不占用主线程资源）。本文非常适合希望夯实 CSS 基础的朋友学习巩固。建议收藏。

本文为《CSS in Depth》全新第2版16.3节内容，主要介绍了 CSS 动画涉及的底层渲染原理和渲染流程，深度探究了 CSS 渲染性能的提升问题已经实际工作中遇到的相关问题。非常适合需要巩固 CSS 基础、提升 CSS 认知水平的朋友们。强烈建议收藏。

本篇为《CSS in Depth》全新第2版16.2节的下篇，主要介绍了示例页导航菜单的后续两个CSS动效——文本飞入及交错渲染的具体实现。作者结合飞入特效仔细讲解了弹跳特效的基本原理和该特效在三次贝塞尔曲线上的主要特征；最后通过交错渲染又联想到预处理器的使用和优化。第2版全面修订了旧版中的 CSS 语法，非常适合希望进一步强化基础，了解最新 CSS 语法特性的朋友们，强烈建议收藏。

本篇为《CSS in Depth》全新第2版16.2节的上篇，主要介绍了CSS变换中的放大效果与过渡效果的实际应用。作者将第1版的示例代码全面更新到最新版本，相当于复习前面章节的知识点，然后深入考察了放大变换以及图标文件的引用问题，并对常见的图标用法进行了归纳总结，非常适合希望进一步夯实 CSS 基础的朋友们。强烈建议收藏。

本篇为《CSS in Depth》全新第2版16.1节内容，主要介绍了 CSS 变换（transform）特效的核心概念、基本用法、以及相关的注意事项。相较第一版新增了三个独立变换属性的的内容，行文也更加流畅，非常适合希望夯实 CSS 动画基础的朋友们。建议收藏、转发，并在本地实践一遍，效果更好。

本篇为《CSS in Depth》全新第2版15.4、15.5节内容，主要介绍了CSS过渡特效在处理元素高度时遇到的问题与对应的解决方案，同时全新增补的 15.5 节还对自定义属性本身的过渡设置进行了深入探讨。最后还对 @property 规则的定义方法做了总结归纳。时目前市面上不可多得的系统介绍 CSS 最新过渡特效的硬核学习材料。强烈建议收藏。

本篇为《CSS in Depth》全新第2版15.3节内容，主要介绍了 CSS 过渡特效在下拉菜单中的实际应用，并结合在实现淡入淡出效果时遇到的问题进行了深入考察和详细讲解。新版对相关内容进行了全面升级，新增知识点我还专门补充了本地实测代码与截图，以加深理解。非常适合有强化 CSS 基础的朋友温故知新。强烈建议收藏。

本篇为《CSS in Depth》全新第2版15.2节内容，主要介绍了控制 CSS 过渡特效的核心组成部分——定时函数的基本概念、使用方法及对应的应用场景。并结合大量的图示说明，对不同场景下的定时函数选择进行了归纳总结，最后还介绍了 steps() 步进式定时函数的相关知识。强烈建议收藏。

本篇为《CSS in Depth》全新第2版15.1节内容，主要介绍了CSS过渡特效的用法及相关注意事项，通过一个普通的按钮切入，配合大量的示意图和详细讲解，让您对CSS过渡有一个直观的认识，为后续高级话题的展开奠定基础。新版章节全面修订了相关代码，非常适合希望夯实 CSS 动效基础的朋友。强烈建议收藏。

本篇为《CSS in Depth》全新第2版14.4节内容，主要介绍了 CSS 中的浮动特效以及浮动在文字环绕形状中的应用。作者通过大量的典型案例和生动形象的示意图，让浮动特效回归它本来的面貌与用法，并结合形状定义实现了一系列极具吸引力的专业级页面特效。虽然是CSS浮动的旧知识，但从形状定义的视角返璞归真，不失为巩固 CSS 基础、了解 CSS 最新前沿动态的绝佳参考资料。强烈建议收藏。

本篇为《CSS in Depth》全新第2版14.3节内容，主要介绍了 CSS 新推出的 clip-path 剪切路径特效的用法与相关注意事项。作者没有逐一展开每一个剪切路径设置，而是详略得当地演示了几个典型案例，并通过介绍大量的实用工具和参考资料来帮助大家更好地理解和应用 clip-path 属性。非常适合希望筑牢 CSS 基础并快速了解当前最新 CSS 进展的朋友们。强烈建议收藏。

本篇为《CSS in Depth》全新第2版14.2节内容，主要介绍了CSS新推出的蒙版特效的用法及相关注意事项。文章通过渐变蒙版的典型案例，分别详细介绍了基于alpha通道和基于蒙版图片的亮度通道来定义蒙版的方法。最后还对CSS提供的各种蒙版属性的用法及核心注意事项进行了总结归纳。非常适合快速掌握蒙版要领，强烈建议收藏。

本篇为《CSS in Depth》全新第二版14.1节内容，主要介绍了 CSS 新增的滤镜特效功能。通过对滤镜的应用场景的介绍、滤镜的分类及背景滤镜的一个典型案例演示，全方位介绍了CSS这一强大功能，非常适合对前端页面感兴趣的朋友，以及期望夯实CSS基础、与当前主流CSS最佳实践全面接轨的朋友们钻研学习。强烈建议收藏。

本篇为《CSS in Depth》全新第2版13.3节内容，主要介绍了CSS混合模式的概念、分类、以及它在各种典型应用场景中的用法与注意事项。既可以作为拓展知识面的延伸阅读材料，也可以作为进阶CSS、了解最新CSS前言动态的绝佳硬核资源。强烈建议收藏起来，并在本地多思多练。

本篇为《CSS in Depth》全新第2版13.2节内容，主要分三个部分详细介绍了CSS阴影效果的具体用法及相关注意事项。通过一个简单的按钮样式，依次演示了拟物化设计、扁平化设计及二者混搭风格下的最新设计风格，并结合最新的CSS颜色表示法（OKLCH色彩空间）全面更新了第一版中的相关内容。非常适合希望夯实基础、在CSS领域与时俱进的朋友。强烈建议收藏。

本篇为《CSS in Depth》全新第2版13.1节后半部分内容，主要介绍了另两个常见的CSS渐变类型——径向渐变、锥形渐变。其中锥形渐变是2019年起草、2021年正式推出的一个新渐变类型，填补了上一版的空白。内容浅显易懂，配图生动形象，无论是对初学者还是有CSS进阶需求的朋友都十分友好，为后面的案例应用做铺垫。强烈建议收藏。

本篇为《CSS in Depth》全新第2版13.1节内容的第二部分，也是新版中全新增补的内容。主要介绍了新版CSS色彩空间插值算法在处理颜色渐变问题中的具体应用以及相关注意事项，可以轻松解决长期困扰前端样式设计的“灰色死区”问题。同时介绍了业界在这一细分领域的最佳实践，是当前市面上不可多得的补空级技术资料，强烈建议收藏。

本篇为《CSS in Depth》全新第2版13.1节的第一部分，主要介绍了 CSS 的基础渐变效果及重复渐变的简单应用。通过大量浅显易懂的案例，结合最新的 CSS 进展向读者娓娓道来。渐变是CSS中一个相对成熟的子领域，虽与第一版变化不大，但平时开发中经常遇到，值得用心体会。强烈建议收藏。

本篇为《CSS in Depth》全新第2版12.6节内容，主要介绍了CSS行距和字间距在页面样式微调及整体的页面观感中的具体应用。相较第一版，本节内容做了适度精简，位置也相对靠后，但仍属于“细节决定成败”的重要知识点。强烈建议收藏。

本篇为《CSS in Depth》全新第2版12.5节内容，详细介绍了 CSS 中的 Web 字体在渲染性能方面存在的问题及相关应对策略、注意事项等，并在前一版的基础加进行了大幅更新，新增了大量今年来 CSS 在 Web 字体应用方面取得的最近进展及前沿趋势，是您进阶 CSS 高级话题、更新 CSS 知识结构的理想参考材料。强烈建议收藏。

本篇为《CSS in Depth》全新第2版12.4节内容，主要介绍了 CSS 中的 @font-face 规则在定义 Web 字体时的工作原理及相关注意事项。本节在前一版的基础上进行了同步更新，最佳实践更能体现当前CSS主流趋势做法。强烈建议收藏。

本篇为《CSS in Depth》全新第2版12.2节与12.3节内容，主要介绍了 CSS 中的 Web 字体的相关背景及谷歌线上字体服务的具体用法与相关注意事项。新版对上一版中的插图做了全面更新，深度解析了 Web 字体诞生的前因后果，非常适合对 CSS 基础有巩固需求的朋友，建议收藏、转发并实操练习。

本篇为《CSS in Depth》全新第2版12.1节的下篇，主要介绍了行内元素在页面间距设置过程中的主要方法及相关注意事项，并结合本章示例页面，用最小的改动解决了行内元素因换行导致的重叠问题。非常适合需要进一步巩固 CSS 基础的朋友学习实践。细节决定成败，这一点在 CSS 的页面开发过程中体现得淋漓尽致。强烈建议收藏起来认真体会。

本篇为《CSS in Depth》全新第2版12.1节内容的中篇，主要介绍了CSS中的行高的相关知识，并结合本章的设计稿案例，详细讲解了 CSS 行高在精确还原设计稿过程中的具体应用；同时还提到了一个即将推出的全新 CSS 属性 leading-trim。非常适合需要进阶 CSS 的朋友，建议收藏并在本地实操落地。

本篇为《CSS in Depth》全新第2版12.1节内容，主要介绍了设计稿转前端页面的过程中各种间距的细节调整和注意事项，例如相对单位和绝对单位的取舍等。本章在前一版的基础上进行了大幅修订，示例代码中引入了大量最新的 CSS 最佳实践，非常适合致力于进一步夯实 CSS 基础、彻底攻克 CSS 薄弱环节的朋友。建议收藏，并同步跟进练习。

本篇为《CSS in Depth》全新第2版第11.4节内容，主要介绍了 W3C 协会在页面字体对比度设置上的一些参考意见，并提到了一些实用的线上工具来辅助对比度设置。本篇可作为页面样式设计的扩展知识。建议收藏。

本篇为《CSS in Depth》全新第2版11.3.4节内容，主要介绍了两个CSS全新推出的用于颜色值操作的强大特性——color-mix() 函数以及相对颜色的配置方法。同时还介绍了另一款精美实用的第三方开源工具 OKLCH 拾色器，甚至支持本地编译部署。时隔不到半年，书中提到的这两个特性已经获得主流浏览器的全面支持，非常适合致力于夯实 CSS 基础、并且希望与时俱进的 CSS 爱好者。对于最新的兼容情况我也专门补充了截图，强烈建议收藏。

本篇为《CSS in Depth》全新第2版11.3节内容的上篇，主要介绍了利用 OKLCH 颜色表示法处理 CSS 各类颜色问题的基本思路与相关注意事项，是第2版全新修订的内容。通过系统梳理 OKLCH 在颜色定义、颜色命名管理等方面的具体用法，生动展示了 OKLCH 色彩空间在 CSS 颜色管理中的无限前景。建议收藏起来用心体会。

本篇为《CSS in Depth》全新第2版11.2.2节内容，主要介绍了 CSS 近年来在颜色描述方面取得的重大进展及相关背景知识。作者对上一版相关内容进行了全面升级，分别介绍了 RGB 色系、Hex 色系、HWB 色系、LAB 与 OKLAB 色系、LCH 与 OKLCH 色系的基本情况，并穿插介绍了一系列高级话题，例如广色域色彩空间、color() 函数等；最后还选取了几种典型颜色对不同色彩空间下的描述方式进行了平行对比。非常适合对 CSS 进阶有需求的朋友。建议收藏。

本篇为《CSS in Depth》全新第2版11.2节内容的中篇，主要介绍了与 CSS 颜色相关的色域和色彩空间方面的知识点，并针对书中提到的关键概念进行了适当增补，非常适合对 CSS 基础有进阶需求的朋友们。本篇也是第2版全新补充的内容，强烈建议收藏。

本篇为《CSS in Depth》全新第2版11.2节的上篇，主要介绍了示例页基本样式和初步布局的实现过程。通过整合前面一至十章的相关知识点，结合大量的示意图，手把手带着大家回顾了模块、层叠图层、页面布局等相关知识，为后续 CSS 颜色的高级话题的探讨奠定坚实基础。建议在本地跟随作者实操一遍，收获更大！

本篇为《CSS in Depth》全新第2版第四部分第11.1节内容，主要介绍了第四部分的主要任务、第11章的学习重点以及演示页面的初始化。从本章开始，作者将整合前面零散的CSS知识点，站在前端专业设计师的角度来介绍 CSS 的最新视觉增强技术，并在这一节详细介绍了对比设计的相关知识，实战性极强。新版内容对之前的高级话题做了进一步拆分，每一章也根据近年来 CSS 的最新进展进行了大幅修订完善，强烈推荐收藏！

本篇为《CSS in Depth》全新第2版10.3/10.4小节内容，主要介绍了与 CSS 容器查询相关的相对单位的使用方法，同时对容器查询中的另一类新兴特性——容器样式查询，结合两个具体案例进行了深入介绍，应该算是目前市面上能找到的最为系统的容器查询扫盲类技术文章了。强烈建议需要进阶 CSS 的小伙伴们收藏、回看。

本篇为《CSS in Depth》全新第2版10.2节内容，主要对CSS容器查询中的核心概念——容器进行了深入探讨，分别从容器的类型、命名及其在模块化 CSS 中的应用，全方位介绍了容器的相关注意事项，并顺带介绍了CSS局限（containment）的概念。强烈建议收藏！

本篇为《CSS in Depth》全新第二版10.1节内容，主要介绍了CSS容器查询的诞生背景、适用场景，并通过一个媒体查询的经典案例，生动演示了容器尺寸查询的具体用法，是目前介绍CSS容器查询的不可多得的高质量科普资料。强烈建议收藏、转发。