Flexbox 高级演练场 - 所有属性可视化控制

CSS 开发工具 CSS Flexbox 可视化布局

快速预设

容器属性

flex-direction

flex-wrap

justify-content

align-items

align-content

gap 10px

row-gap 10px

col-gap 10px

子项属性（点击下方方块选中）

👆 点击可视化区域中的方块来选中子项

实时预览容器内共 5 个子项

主轴交叉轴

生成的 CSS

.flex-container {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        justify-content: flex-start;
                        align-items: stretch;
                        align-content: stretch;
                        gap: 10px;
                        }

CSS Flexbox交互演示 - 在线弹性布局学习

拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。

CSS Grid 调试覆盖层 - 显示网格线与区域

在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。

开发工具 Grid 可视化覆盖层调试

Flexbox属性速查 - 可视对照表

可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。

前端设计 Flexbox 属性速查

CSS缓动函数试玩场 - 所有预设一览

并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。

前端设计 CSS 动画缓动

最新

CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果

应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。

CSS contain CSS 性能隔离

最新

@property 规则演示 - 自定义属性类型与动画

注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。

CSS CSS @property 动画

CSS选择器构造器 - 基于关系和属性构建

通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。

前端设计 CSS 构造选择器

最新

CSS Grid 可视化速查表 - 所有属性一览

将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。

CSS CSS Grid 可视化属性速查

最新

CSS 自定义属性演练场 - 动态修改 var() 看效果

定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。

CSS CSS 变量自定义属性

新拟态设计生成器 - CSS Neumorphism样式代码

调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。

前端设计 CSS Neumorphism 新拟态

CSS混合模式实演 - background-blend-mode

选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。

前端设计 CSS 混合模式演示

CSS Grid可视化调试器 - 叠加网格线

为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。

前端设计 CSS Grid 可视化调试

CSS 伪类效果测试场 - 实时查看 :is() :where() :has()

编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。

CSS CSS :has 伪类选择器

Tailwind 调色板可视化浏览器 - 所有色阶一览

可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。

CSS Tailwind 浏览调色板颜色

CSS 系统颜色演示 - Canvas/Window/Highlight 等

展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。

CSS CSS 主题演示系统颜色

悬停提示框生成器 - 纯CSS/JS气泡样式定制

选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。

开发工具 CSS tooltip 提示框生成

最新

JavaScript this 上下文测试器 - 不同调用方式下的指向

编写函数并选择调用方式（普通、方法、call、apply、箭头等），输出 this 的值。

JavaScript this 上下文测试

最新

Cypress 测试场景构建器 - 点选生成测试代码

可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。

开发工具 Cypress 场景构建器测试

内联样式提取合并工具 - 汇总 style 属性为类

提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。

CSS CSS 内联样式合并提取

Catmull-Clark 细分曲面演示 - 控制网格迭代

载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。

图形学 Catmull-Clark 图形学曲面细分

CSS 光标样式预览工具 - 所有内置光标效果展示

列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。

参考 CSS 光标参考预览

HTML内联样式提取器 - 批量整理为独立CSS

提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。

CSS CSS 内联提取重构

跳跃表可视化器 - 插入/搜索层级演示

随机可视化Skip List的层级结构和快速查找过程，对比链表效率。

教育工具可视化算法跳跃表

骨架屏代码生成器 - 加载占位灰色块

为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。

前端设计 CSS 生成骨架屏

Webpack 打包分析器 - stats.json 可视化

上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。

开发工具 Webpack 体积打包分析模块

最新

Web Worker 代码生成器 - 快速创建独立线程脚本

编写主线程和 Worker 内的逻辑模板，自动生成分离的 JS 文件代码，加速 Worker 开发。

代码生成 Web Worker 多线程生成器

贝塞尔缓动函数调校工具 - 自定义动画曲线

拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。

前端设计 CSS 缓动贝塞尔

纯CSS暗黑模式切换 - checkbox黑客实现

利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。

前端设计 CSS 切换暗黑模式

CSS属性兼容性表格 - 按使用率排序

搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。

前端设计 CSS 兼容性表格

视差背景生成器 - 纯 CSS 多层效果

上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。

CSS CSS 生成背景视差