想象一下，如果你在面试中被问到，“你能实现冒泡排序吗”？ 你自信满满地回答面试官，“当然，你想问的是用JavaScript还是CSS呢？”。 大佬风范迎面而来。 你可能会嗤之以鼻，这有啥好炫耀的呢，“没有面试官会对实现一个模拟冒泡排序的动画印象深刻，好吧?”。 你说的没错！ 但是，如果我们创建的这个冒泡排序算法...是通过纯CSS实现的...且额外添加可视化效果呢？ 是不是瞬间就感觉高大上了呢？

近年来，Tailwind CSS 在前端开发领域备受关注，在GitHub上收获了70000+ Star。尽管市面上有众多的 CSS 框架可供选择，但 Tailwind CSS 凭借其独特的概念、强大的特性和灵活性越来越受到开发者的喜爱。那么，为何 Tailwind CSS 如此受欢迎呢？本文将深入探讨这个问题，并介绍 Tailwind CSS 的概念、特性、技巧和组件库，以更好地理解和使用它！ 1

今天我们要介绍100多个使用单个元素制作的CSS丝带。是的，只用到一个元素。 这可不是用旧的和过时的代码制作的CSS丝带，而是用现代CSS制作的，并对CSS变量进行了优化。没有幻数也没有固定尺寸。随你所愿可以将所有丝带放置于任何内容之中，通过调整变量即可轻松控制。 只需单击一下即可复制丝带的CSS代码，无论是经典的丝带，还是新式的、花哨的，总有一款让你眼前一亮。 你还在等什么？一起来看看吧。 多行

将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。 通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的理解各种不同的渐变。 同时，借助强大的

Servo网络引擎项目发布了一篇新的博客文章，概述了他们在2月份取得的所有成就。 对于铁锈编写的Servo Web布局引擎来说，这是忙碌的过去几周。这个新的开源项目在2月份取得的一些成就包括： -Servo现在整个CSS测试套件中都超过了它的传统布局引擎。 -支持IMAGE/SVG+XML MIME类型的SVG。 -使用Gamepad API支持(非XR)游戏控制器。 - 对CSS文本转换属性的基

随着前端开发的不断发展，CSS 的功能日益强大，其中 @规则扮演着举足轻重的角色。它们不仅扩展了 CSS 的功能边界，还为开发者提供了更加灵活和高效的样式定义方式，让我们来一同探索这些强大而实用的 @ 规则吧！ @font-face @font-face 用于使用自定义字体。它的基本用法包括定义一个字体家族并为这个家族指定一个或多个字体源文件。字体家族是为字体取的名字，而字体源文件则是字体的实际文

今天来分享一个前端必备的工具，其每天在 npm 上的下载量高达 1000 万次，几乎每个前端项目都在用，它就是 PostCSS。这款工具已经成为前端开发领域中不可或缺的一部分，之所以如此受欢迎，不仅是因为它能够帮助开发者自动化处理 CSS 中的兼容性问题，更是因为它提供了一个强大的插件生态系统。这些插件可以让开发者轻松实现各种高级的 CSS 功能，如自动添加浏览器前缀、使用最新的 CSS 语法特性

本文来分享 12 个超级实用的CSS 技巧，帮助你充分发挥 CSS 的优势，优化用户体验。 user-select user-select 属性可以用来控制用户是否能够选择文本。 You can't select this text. You can select this text. CSS： div { width: max-content; height: 40px; border: 3px

大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。 本期共享的是 —— 那些我们可以开始使用或提前预习的 CSS 现代属性。 有时，优化我们 App 的 CSS 只需要一行代码就能升级或增强！了解 12 个现代化属性，将其合并到项目中，享受减少技术债务、删除 JS，以及轻松赢得用户体验的乐趣。 本文会科普 3 种不同兼容性的属性： 稳定升级：通过替换旧技术，修复 hack（奇技淫

导读：本文介绍 Bootstrap、Tailwind、Foundation、Bulma、UIKit等UI/CSS框架，让我们一起探索 2024 年最佳 CSS 框架。 为自己的项目选择正确的 CSS 框架非常的关键，也非常地重要，此举会为构建新的 UI 组件所需的整体工作定下基调。目前最重要的是更快地发布新功能，让我们的用户更加满意。 因此，我们需要一个易于使用，并可能提供即用型 UI 元素的 C

在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration 文字装饰 text-decoration 意为文字装饰，在很早的规范 CSS Level 2 (Re

思科的VSS（Virtual Switching System）和华为的CSS（Cluster Switch System）是两家不同厂商提供的解决方案，旨在提供高可用性、冗余和容错性的网络设计。 厂商 VSS：思科的解决方案。 CSS：华为的解决方案。 架构 VSS：VSS通过将两个物理交换机虚拟化为一个逻辑交换机，提供高可用性和容错性。 CSS：CSS通过将多个设备成员虚拟化为一个逻辑设备，实

在平时开发中，有时候会碰到这样的彩色阴影，效果如下： 是不是非常有质感？下面分别介绍 CSS 和 SVG 两种实现方式，一起看看吧！ 一、实现原理 从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加在一起就行了，示意如下： 那么具体如何实现呢？接着往下看。 二、CSS 滤镜 首先，单纯的 CSS并不能直接做出这种效果，毕竟无法生成一份相同的图片，因此，我们需要手动创建一个相同的图层。 假设H

除了……之外Firefox 122为了让它今天变得稳定，谷歌还将他们的Chrome121网络浏览器推广到其稳定渠道。 Chrome 121今天发布，它的发布恰好与Firefox 122正面交锋。Chrome121有17个安全修复程序，其中包括三个高CVE。Chrome 121中的安全修复程序可以通过Google Chrome发布博客。 Chrome 121还为选项卡组织添加了新的AI功能、新的CS

前不久看到这样一个很有趣的效果，它的滚动条是沿着圆角边缘滚动的，效果如下 你可以查看原链接来体验一下 https://codepen.io/jh3y/pen/gOEgxbd。 这是如何实现的呢？ 原效果中由于为了兼容不支持CSS滚动驱动的浏览器，特意用 JS做了兼容，所以看着比较复杂，其实核心非常简单，下面我将用最简短的 CSS 来复刻这一效果，一起看看吧！ 一、SVG 路径动画 从本质上来讲，其

作者简介 19组清风，携程资深前端开发工程师，负责商旅前端公共基础平台建设，关注NodeJs、研究效能领域。 一、引言 三年前 Facebook 开始思考在目前设计系统下面临的问题，那时它们在前端项目、系统组件等部分使用的是 cssmodule 的样式方案。 直至今日，Facebook 已经将所有的 Web 前端使用 React 进行重写的同时，也使用了一种新的 Atomic Css-in-JS

CSS（层叠样式表）是前端开发领域的主要技能之一，用于实现网站设计的视觉呈现。虽然您可能已经熟悉许多 CSS 属性，但仍有一些较少讨论的属性可以增强您的样式设计能力。在今天这篇文章中，我将通过代码片段与你分享15 个 CSS 属性。 让我们直接开始吧。 1、accent-color 当涉及到复选框和单选按钮等输入时，浏览器通常会引入默认颜色，该颜色可能与您的 UI 所选配色方案不太协调。 为了保持

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。 不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相同的颜色覆盖实现的，如下： ：时代在进步，CSS也在不断发展。 CSS 容器查询[1]出来也有一段时间了，能够动态判断容器尺寸，赶紧拿来用一下，发现并没有想象中的那么顺利，甚至还有

CSS Text Module Level 4 中的四项新国际 CSS 功能即将登陆 Chrome 浏览器。本篇文章将介绍哪些功能已经发布，哪些功能即将发布。 从 Chrome 119 开始：日语短语换行与断字：word-break: auto-phrase。 开发中：使用 text-spacing-trim 属性的中文、日文和韩文标点字距。 来自 Chrome 120 的：具有 text-aut

如果你和我一样觉得 Sass 的 CSS 嵌套功能非常有用，那么你一定会很高兴地知道，我们的好日子就要来了。 因此，如果你不知道，Sass 的 CSS 嵌套功能允许您将 CSS 选择器嵌套在其他选择器中。例如，你可以这样写： .parent { .child { color: red; } } 这将被编译成以下 CSS。 .parent .child { color: red; } 当你想为某一特