在响应式布局布局中，经常使用媒体查询（Media Queries）检测视窗的宽高，实现自元素样式的自动调整。但是在一些页面设计中，元素的容器尺寸发生变化时，元素的样式也需要随之变化。很显然，媒体查询无法支持这种场景。为了解决这类问题，CSS 增加了一个新的特性 容器查询（Container Queries）。

在平时开发中，我们可能会遇到水平滚动条的问题，尤其是在移动设备上。因为滚动条问题的原因有很多，所以没有直截了当的解决方案。有些问题可以很快解决，有些需要一点调试技巧。

那什么是溢出问题呢？当水平滚动条无意中出现在网页上，允许用户水平滚动时，就会出现溢出问题，它可能由不同的原因导致。

文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色。

本文就将介绍，使用 CSS，快速将一个普通黑色二维码，变成任意我们想要的彩色渐变二维码。

使用新的 CSS 特性，写出好的 CSS 代码。

Amazing~炫彩三角边框动画。

CSS 边框动画？奇思妙想尽在其中~

在早期的 Web 开发中，页面的布局和定位通常要用表格和各种 hack 技术来实现。与那时相比，CSS 已经得到了长足的发展。如今，开发人员可以很轻松地编写出适用于所有主流浏览器的 CSS 代码，在实现复杂布局时也不会像以前那样绞尽脑汁。这不仅使响应式布局变得更容易，还可以通过删除冗余的代码来发布体积更小的样式。在本文中，我们将使用现代技术来降低代码的复杂程度，通过一些较新的技术来编写出更好的 CSS 代码。

我们通过一些较新的技术来编写出更好的 CSS 代码，在本文中主要介绍逻辑属性的使用。

在早期的 Web 开发中，页面的布局和定位通常要用表格和各种 hack 技术来实现。与那时相比，CSS 已经得到了长足的发展。如今，开发人员可以很轻松地编写出适用于所有主流浏览器的 CSS 代码，在实现复杂布局时也不会像以前那样绞尽脑汁。这不仅使响应式布局变得更容易，还可以通过删除冗余的代码来发布体积更小的样式。在本文中，我们将使用现代技术来降低代码的复杂程度，通过一些较新的技术来编写出更好的 CSS 代码。

在早期的 Web 开发中，页面的布局和定位通常要用表格和各种 hack 技术来实现。与那时相比，CSS 已经得到了长足的发展。如今，开发人员可以很轻松地编写出适用于所有主流浏览器的 CSS 代码，在实现复杂布局时也不会像以前那样绞尽脑汁。这不仅使响应式布局变得更容易，还可以通过删除冗余的代码来发布体积更小的样式。在本文中，我们将使用现代技术来降低代码的复杂程度，通过一些较新的技术来编写出更好的 CSS 代码。

目前市面上有很多页面搭建方案，其中一种是基于运行时的lowcode/nocode搭建平台，主要是面向运营、产品及部分开发人员；另外一种则是基于DSL或代码，将可视化能力作为代码编写的辅助能力集成进现有项目中，主要是面向开发人员。AUX辅助工具（下文简称AUX）属于后者。

AUX是架构前端内部研发的一套可视化开发工具，旨在为前后端研发同学提供页面开发的可视化交互和代码生成能力。它侵入性弱，直接对代码进行修改，因此在兼顾易用性的同时产生的代码具有很强的可维护性和二次开发能力。同时，也由于完全基于代码本身，和其他低码平台不同，除了代码没有更加详细的元数据，所以AUX的很大一部分工作，在于努力实现基础的从运行时到编译时的反向处理能力，这样才能保证用户在浏览器中的各种操作能够被分解，并还原到真正的源代码中。

AUX工具提供了很多有趣的功能，其中一个是关于在浏览器中对css样式进行可视化编辑。可视化样式编辑的目的是让开发者能够在开发环境的浏览器端通过编辑器修改页面中的css样式，并实时更新页面中的样式渲染结果，最终在完成编辑后能够直接生成代码并写入用户的项目中。其中，怎么样在浏览器中获取到css代码的元数据，就是首先需要解决的问题，本文将主要围绕这个问题进行讨论。

本文将介绍 CSS 当中，几种有意思的，可能可以动态改变弧形线条长短的方式。

众所周知，网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。我们希望用一些方法来避免 CSS 出现某些意料之外的样式问题。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码，减少因内容动态的变化引起样式上的问题。点击 编写防御性 CSS 实践 (Part I) 、编写防御性 CSS 实践 (Part Ⅱ)、编写防御性 CSS 实践 (Part Ⅲ)可查看前几篇文章。

网页上呈现的内容不完全是静态的，是可以发生变化的，因此这增加了 CSS 出现问题的可能性。本文介绍一系列防御性 CSS 的代码片段，帮助我们编写出更健壮的 CSS 代码。

本文讨论讨论：

1. 使用 CSS 如何制作如上所示磨砂（毛玻璃）质感效果的渐变背景图
2. 如何借助 CSS-doodle 工具，批量产生该效果图，并且附带动画效果