CSS 工具箱

使用说明

集中几个实用但手写起来琐碎的 CSS 任务：把 HTML 转换成等价的 JSX 写法（省去逐个改 class 与自闭合标签）、可视化地拖拽生成 clip-path 裁剪形状、以及一键产出玻璃拟态与新拟态两种流行风格的完整样式代码。适合在写组件时快速拿到可用的片段。

顶部切换三个模块。HTML 转 JSX 把标记粘进左侧即可在右侧得到转换结果并复制；clip-path 模块提供可视化的多边形编辑器与常用形状预设，拖动顶点实时预览；玻璃拟态与新拟态模块用滑块调整模糊、透明度、阴影与高光参数，代码框同步输出 CSS 与对应的 HTML 结构。

HTML 转 JSX 会自动处理哪些差异？

class 改 className、自闭合标签这类机械调整都会自动完成，粘入左侧即可在右侧拿到结果并复制，省去逐个手改。

玻璃拟态与新拟态生成的代码能直接用吗？

可以。滑块调整模糊、透明度、阴影与高光时，代码框同步输出 CSS 与配套的 HTML 结构，复制进项目后按需微调即可。

两种心智模型空间分配与圣杯布局对照

继HTML后的CSS记录

Shell、Vim、tmux、systemd、Docker、K8s、nginx、git 等运维速查。

JSON 格式化、行数统计、TODO 提取、JSDoc 注释生成、复杂度估算与代码卡片，另有键码、Unicode、URL 参数、Favicon 与 OG 图五个小件。

灵签抽签、易经铜钱卜卦、塔罗每日一抽、关帝灵签、硬币决策、解梦词典与趣味算命。

单词卡、五十音图、笔顺字数、成语接龙、诗词填空与脑筋急转弯。

恋爱匹配、今日运势、抛硬币决策、习惯/喝水/记账/待办、vCard/iCal、用户名/头像/占位图生成等。

字符编码查看、HTML 实体、JS 沙箱、CSS 单位换算、选择器测试、Markdown 表格、目录生成、JSON 查询与视口检测。