UD5工具箱
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
CSS Grid 调试覆盖层 - 显示网格线与区域
CSS Grid 调试覆盖层
实时可视化网格线、轨道与区域
列线
行线
编号
尺寸
区域
支持: fr, px, %, auto, repeat(), minmax()
留空则自动生成行
每行用引号包裹，空格分隔。留空则不使用区域命名
常见问题与知识点
在CSS Grid中，列网格线从1开始从左到右递增，行网格线从1开始从上到下递增。如果定义了
grid-template-areas，还会自动生成以区域名命名的网格线（如header-start、header-end）。负数索引（如-1）表示从末尾开始计数。使用本工具的覆盖层可以直观地看到每条线的编号。
fr（fraction）是CSS Grid独有的弹性单位，代表剩余空间的一份。例如1fr 2fr表示将剩余空间分为3份，第一列占1份，第二列占2份。px是固定像素，%是相对于容器宽度的百分比。fr的优势在于它会自动减去固定轨道和间距后再分配，非常适合响应式布局。
使用
相同的名称会自动合并为一个矩形区域。然后通过
grid-template-areas可以为网格区域命名，每行用引号包裹，空格分隔。例如："header header header""sidebar main main""footer footer footer"相同的名称会自动合并为一个矩形区域。然后通过
grid-area: header即可将元素放置到对应区域。本工具会在覆盖层中为每个命名区域绘制彩色边框和标签。
当然！顶部工具栏提供了颜色选择器，您可以自由选择覆盖层的颜色。覆盖层会自动适配不同背景，确保网格线始终清晰可见。您还可以独立切换列线、行线、编号、轨道尺寸和区域名称的显示。
本工具特别适合：① 验证网格线位置是否符合预期；② 检查命名区域是否正确合并；③ 查看轨道尺寸的实际渲染值；④ 调试复杂嵌套网格；⑤ 学习和教学CSS Grid布局原理。覆盖层实时反映配置变化，所见即所得。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
CSS Flexbox交互演示 - 在线弹性布局学习
拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
SVG背景图案集 - 点线/网格/波纹等
提供数十种精致SVG背景纹理，可调颜色，生成CSS背景代码或下载SVG。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状，可视生成CSS clip-path多边形、圆形、椭圆等，实时预览并复制代码。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。