CSS 的 border-radius 技术已经是非常成熟的技术了，在现代 Web 开发的过程中，实现圆角的效果都是使用 border-radius 来实现。使用 border-radius 来给一个盒子添加圆角效果已经是最为常见，最简单的技术了，但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说：“Facebook 应用在border-radius上使用了 CSS 的比较函数（比如 min()和max()）来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术，可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢？CSS 是如何有条件地将border-radius设置不同的值。如果您感兴趣的话，请继续往下阅读。

对于 CSSer 而言，CSS 选择器是 CSS 领域最基础不过的知识了，他虽基础，但在给元素设置样式，选择器是不可或缺的。正所谓，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”！在 Web 开发中，我们需要通过选择器的能力，在众人中找到想找到的人。话又说回来，选择器虽然简单，但它却很重要，就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点（现在已经是 Level 4 版本了）。事实上，早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。

在现代 Web 中，阴影已经成为主要设计要素之一，甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中，使用光和影子可以增加物理上的真实感，并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说，在 Web 中给 UI 添加阴影效果有多种不同的技术方案，但从实现阴影效果的 CSS 属性来说，常见的主要有 text-shadow（文本阴影）、box-shadow（盒子阴影）和 filter的drop-shadow()（不规则阴影）。今天，我们就一起来聊聊 CSS 这方面的特性。

W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中，最为有意思的是“逻辑组合选择器”，即 “任意匹配伪类选择器:is()、否定（匹配无）伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性（父选择器）伪类选择器:has() 。尤其是关系性伪类选择器:has()，它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。在这篇文章中，我将和大家一起来探讨什么是关系性伪类选择器（又称父选择器）以及它是如何工作的，并且将会通过一些示例来阐述该选择器可以在哪里，最重要的是我们现在如何使用它。

在 CSS 中说起函数，我想很多人首先想到是 calc() 数学运算函数，其实在 CSS 中有很多种不同类型的函数，有些“CSS函数”可以在CSS中用于动态计算，比如 calc()函数，计数器函数 counter() 和 counters() 和 CSS比较函数 min()、max() 和 clamp()。尤其是 calc()、min()、max() 和 clamp() 这几个函数，在现代Web开发中所起的作用越来越大，使用的场景越来越多，带来的灵活性和扩展性越来越强。那么在这篇文章中，我们主要和大家一起来探讨 CSS 比较函数在实际开发中能用在哪些地方？又是如何帮助前端构建响应式UI？感兴趣的同学请继续往下阅读。

溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知，Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下，盒子大小是有限制的，有可能内容会超出这些盒子，在 CSS 中，这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中，将和大家一起探讨 CSS 溢出模块相关的话题。比如，什么是溢出？什么情况下会导致溢出？如何使用CSS来控制溢出等等。

在第一部分主要和大家聊了CSS溢出的概念和理论相关的，在第一部分主要以实例，问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候，总是避免不了给容器设置一个具有约束性的尺寸，有的时候，因为容器没有足够的空间来容纳内容，从而造成内容溢出容器，严重的会打破 Web 布局，干扰页面的美观。为了让这些现象能不干扰 Web 布局，所以需要CSS溢出特性。除此之外，我们在构建一些Web组件和实现一些UI效果，也需要依赖CSS溢出特性。那么接下来，我们来看一些溢出相关的案例。

背景（background）是 CSS 中最常见也是最基础的一个属性，它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色（background-color）、背景图像（background-image）。如果是背景图像的话，还可以调整背景图像的位置（background-position）、设置背景图像的平铺方式（background-repeat）以及背景图像在背景层的依附模式（background-attachment）。不过，随着 CSS 技术不断向前发展，CSS 为开发者提供了一些新特性用来控制背景图像，比如背景图像的大小（background-size）、背景图像的剪切（background-clip）、背景图像的定位区域（background-origin）以及给同一个元素盒子设置多个背景。除此之外，CSS 还为 background 的一些老属性新增了功能，比如 background-position可以指定四个值，通过方向设置背景图像的位置，background-repeat 多了几种不同的平铺方式。另外，CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式，从而改变背景图像的效果。

在第一部分主要和大家一起探讨了 CSS background属性中的background-image、background-repeat、background-attachment 等属性。今天接着和大家一起来探讨其另外三个子属性，即 background-position、background-clip 和 background-origin。感兴趣的同学请继续往下阅读！

前面已经花了两篇的篇幅（《CSS背景：Part1和Part2》）介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之，在Web中对于<img>引入的图片，我们可以显式使用width、height、aspect-ratio或object-fit等属性来调整图片尺寸，但对于背景图片，我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢？如果你感兴趣的话，这篇文章可以告诉你很多不为人知的答案。