CSS Color 4 为 Web 提供了广色域色彩工具和功能：更多颜色、操作函数和更出色的渐变效果。

CSS 属性 aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

当我们真正掌握了 Flexbox 布局模式的奥秘，我们就能构建出绝对令人难以置信的作品。无需任意断点即可伸缩的流体布局。在本实用互动教程中，我们将揭开 Flexbox 算法的神秘面纱，学习如何利用它实现非凡的效果。

将网页漂亮的打印到纸上的CSS

初级前端开发人员常犯的 7 个 CSS 错误（以及如何纠正它们）

Chrome 浏览器 120 已于上周发布，在这个版本中，我们获得了用于脚本支持的 CSS 媒体查询（media query）。简单地说，这个媒体查询允许你测试脚本语言是否可用，并根据支持情况调整页面内容和样式。

这是一款仅使用 CSS 的 loading 效果生成配置工具，可让您毫不费力地为自己的网站定制和生成令人惊叹的加载器。只需复制和粘贴，无需任何安装或依赖麻烦。

利用 CSS3 3D 变换和一些 Javascript 创建类似 3D 的云朵。

，我们将指导您使用 Bootstrap 5 和 Vite，结合 PurgeCSS，移除这些未使用的 CSS，从而创建更高效、更优化的制作捆绑包。

网络和设计工具中最常用的模糊类型是高斯模糊。描述模糊程度的方法有很多种，实现方式也千差万别，一个应用中的模糊可能与另一个应用中的模糊大小完全不同。

实验性：这是一项实验性技术 在生产环境中使用前，请仔细查看浏览器兼容性表。 通过 light-dark() C […]

calc()是一种在 CSS 中进行简单数学运算的原生 CSS 方法，可表示任何长度值（或几乎任何数值）。它有 […]

写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？

纯 CSS 作品，没有图片和JavaScript，你能相信吗？

最近国外的一位网友发现了一个有趣的现象，有一个DIV，它在每种浏览器中的样子看起来都不一样，比如说firefox、edge、chrome、Safari、IE等。他给出的代码是这样的：

将图片卷成圆筒效果的两种技术方法

效果不错，就是有点僵硬，我们可以适当改变缓动函数以及加上一个动画延迟，就可以实现上述开头里的那个效果了。当然，这些都是锦上添花的点缀。

CSS 选择器语法速查

只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。

:focus-within 是一个新的CSS伪类( pseudo-class)，它跟 :focus 、 :hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。

pattern属性是HTML5里出现的新属性，它适用于type类型为text, search, tel, url, email, 和 password等的input元素上，配合:valid伪类，就能实现JavaScript里的正则表达式等效的校验算法。

iPhone X 配备一个覆盖整个手机的全面屏，顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个“安全区域”，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。

初看起来，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

这一点，我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之–各种居中里面的第八点。

will-change 属性这种现象跟元素层叠顺序(类似z-index)混乱有关，但是因为要使用 will-change 属性，就必须要接受这种混乱的现实。

我想，这些浏览器开发商和规范制定者会说：“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了，但你们知道怎么做。这些之外的事情我们会尽力做好，剩下的事情你们来告诉我如何能做的更好。”

如果你开发的页面非常复杂，那么，这个CSS的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件，始终使用contain: strict;是很好的习惯，它可以保护你的页面不受它们的干扰而出现性能问题。

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

除了vm和vh两种单位外，还有两种类似的单位：vmin——取vw和vh中较小的一个为基准，和vmax——取vw和vh中较大的一个为基准。它们同样是一个单位数值，跟px、em、%的用法类似。

今天在网上看到一有趣的开关按钮的制作，用到了SVG、css3和js，下面的演示中还引用了TweenMax.min.js，这是一个js动画工具库。

上面的这个加载中效果，以前是用gif动图实现的，但随着CSS的进步，CSS动画功能越来越强大，我们只用一小片段HTML和CSS就能实现，方便了很多，体积也减小了很多。

终于找到了一个好方法，使用:not(:last-of-type)简单方便，再也不要麻烦的单独使用:last-of-type了，不错！

问题是这样的：如果几个inline-block元素放在一起，它们的代码是按常见的HTML标准格式化，那么，在它们之间就会存留一些空格。

Web开发人员在调试网页时经常会遇到clear:both不起作用的情况，clear:both的作用是让改元素不浮动，让它在左右两边都没有其它网页元素排列。大多数情况下我们需要用用到clear:both，是因为让一个网页元素float:left或float:right时，它却浮动在其它元素旁，

本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter)，利用这些属性，我们可以让同一张图片呈现出各种不可思议的神奇效果。