用 Hexo 搭建暗色科技风个人站点
为什么选 HexoHexo 将 Markdown 转为静态 HTML，部署简单、访问速度快，非常适合个人博客与作品集站点。 核心流程 本地 hexo new 创建文章 hexo generate 生成 public 目录 上传到服务器 Nginx 根目录 主题定制思路 暗色基底 + 霓虹点缀色 backdrop-filter: blur() 实现磨砂玻璃 多层 radial-gradient 营造光影氛围 1hexo clean && hexo generate 小结静态站点 + 宝塔 Nginx 是性价比很高的个人站点方案。
玻璃拟态（Glassmorphism）在界面设计中的实践
什么是玻璃拟态玻璃拟态通过半透明背景、背景模糊与细边框高光，让界面层叠更有空间感。 CSS 关键属性123456.glass-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);} 使用注意 背景需要有一定纹理或渐变，模糊效果才明显 注意对比度，保证文字可读性 移动端注意 backdrop-filter 性能 应用场景仪表盘卡片、导航栏、模态层、作品集展示块都很适合这种风格。
从设计稿到前端：高保真还原 checklist
交付前对齐 设计 Token（颜色、间距、圆角、阴影）是否导出 响应式断点与组件状态是否完整 字体、图标资源是否可商用且已打包 开发阶段 先搭布局骨架（Grid / Flex） 再补交互与动效 最后做像素级对齐与可访问性检查 常见坑 仅按 375 宽度设计，缺少桌面端规则 阴影/模糊在不同浏览器表现不一致 动画时长与缓动函数未标注 推荐工具链Figma Dev Mode + Storybook + 浏览器 DevTools 组合，可以显著降低返工率。