/* CSS 片段将在这里显示 */
一个页面覆盖前端最常用的七种纯 CSS 视觉效果，左侧调参、右侧实时预览、底部一键复制或下载代码：
| 效果 | 用途 |
|---|---|
| Flex 布局 | 可视化调试 flex-direction / justify-content / align-items / gap，理清主轴与交叉轴 |
| CSS 圆角 | 四个角独立设置 border-radius，生成简洁代码 |
| 霓虹灯文字 | 多层 text-shadow 叠加的发光文字，适合暗色主题、LOGO |
| 故障文字 (Glitch) | 伪元素 + clip 关键帧模拟信号干扰重影，赛博朋克风格 |
| 新拟态 (Neumorphism) | 双向 box-shadow 打造凹凸柔和质感 |
| 3D 卡片翻转 | perspective + rotateY + backface-visibility 的翻转卡片 |
| 毛玻璃 (Backdrop Filter) | backdrop-filter: blur() 磨砂半透明效果，含 -webkit- 前缀与回退方案 |
Q：生成的代码需要额外的 HTML 结构吗？
A：圆角、霓虹、新拟态只需一个元素套上对应类名即可；故障文字需要元素带 data-text 属性；3D 卡片需要 .card-3d > .card-inner > .card-front/.card-back 三层结构，代码注释里有说明。
Q：毛玻璃在某些浏览器不生效？
A：旧版浏览器不支持 backdrop-filter。生成结果里已包含 -webkit- 前缀和 .no-backdrop 回退样式（半透明背景 + 阴影），可按需启用。