UD5工具箱
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
粘贴包含内联样式的 HTML 代码，自动提取 style 属性值，将相同样式合并为 CSS 类，生成清爽的 HTML 与对应的样式表。
输入 HTML
处理后的 HTML
等待处理...
提取的 CSS
等待处理...
常见问题与知识点
内联样式是直接写在 HTML 元素
style 属性中的 CSS 声明。虽然书写方便，但会导致 HTML 臃肿、难以维护，且无法利用浏览器缓存。提取为 CSS 类后，多个元素可共享同一样式定义，减小文件体积，提升代码可读性和可维护性。
开启后，工具会将 style 中的 CSS 属性按字母顺序重新排列后再进行比较。例如
color:red;font-size:14px 和 font-size:14px;color:red 会被识别为相同样式并合并为一个类。关闭则按原始顺序严格匹配。
会的。内联样式优先级仅次于
!important，转为 class 后优先级会降低。如果页面中有其他样式表可能覆盖这些规则，建议检查并适当调整 CSS 选择器权重，或在必要时保留原 style 属性作为兜底。
减少量取决于重复样式数量。如果有 10 个元素使用完全相同的 80 字符内联样式，原始占用 800+ 字符，提取后只需约 10×20（class名）+ 80（CSS规则）= 280 字符，节省约 65%。重复越多，节省越显著。
支持完整 HTML 文档（含
<!DOCTYPE>、<html>、<head>）以及任意 HTML 片段。使用浏览器原生 DOMParser 解析，兼容性好，能正确处理嵌套标签、特殊字符和 HTML 实体。
内联样式：写在元素 style 属性中，优先级高但不可复用；内部样式：写在
<style> 标签内，仅限当前页面；外部样式表：独立的 .css 文件，可被多页面共享和浏览器缓存，是最推荐的方式。本工具帮助你将内联样式迁移为可复用的类。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
面包屑导航生成器 - HTML+CSS直接输出
添加层级名称与链接，自动生成带Schema结构化的面包屑导航条。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
打印样式表生成 - 一键隐藏无用元素
自动生成适合打印的`@media print`样式，重置背景色、字号并隐藏导航。
CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状，可视生成CSS clip-path多边形、圆形、椭圆等，实时预览并复制代码。
URL参数可视化提取 - 分层解析查询串
粘贴带参数的URL，以表格形式列出所有Query参数与值。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
滚动文字横幅生成器 - 替代 marquee 标签
设置文字、速度和方向，生成使用 CSS 动画实现的滚动横幅代码。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
CSS Clamp() 生成器 - 最小/首选/最大字体
设定最小、首选、最大三个尺寸及视口范围，生成响应式CSS clamp()表达式。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。