介绍
页面围绕“模糊边框素材”搭建了 3 个嵌入式卡片模块:内容面板、视频嵌入框、公告提示条。每个模块都使用同一套毛玻璃边框结构,只在内部内容和局部样式上区分,方便用户按需拷贝到不同业务模块里。

技术栈
HTML5、CSS3、JavaScript 原生实现,无外部依赖,兼容本地静态打开。
软件架构
- index.html:3 个卡片模块与切换按钮结构。
- styles.css:模糊边框、背光高亮和卡片差异化样式。
- script.js:卡片切换和激活态控制。
安装教程
- 下载并解压 zip 压缩包。
- 直接打开 index.html 查看效果。
- 把 .blur-border 结构复制到你的页面中即可开始使用。
使用说明
- 用于视频、下载、提示条等模块时,只需要替换内部内容容器。
- 调整背景渐变和边框透明度后,可快速适配深色或浅色站点。
- 如果只需要单张卡片,删除其余卡片与按钮即可。
功能讲解
- 边框使用双层背景和内侧模糊层叠加,形成真实的毛玻璃轮廓。
- 切换按钮只控制当前展示焦点,便于截图和下载页展示。
- 首屏完全围绕模糊边框展开,没有加入无关模块或说明卡片。
