图标
🎨 图片彩色边框 – 用户脚本使用指南
为网页上的所有图片自动添加动态彩色边框，让浏览体验更生动。
📖 脚本简介
图片彩色边框 是一款轻量级用户脚本（UserScript），适用于 Greasemonkey、Tampermonkey、Violentmonkey 或 ScriptCat 等用户脚本管理器。它会自动为当前页面中的所有 <img> 图片添加带圆角的彩色边框（通过 box-shadow 实现），并支持自动变色、手动刷新以及细粒度调节（速度、边框粗细、圆角大小）。
- 版本：v9.0
- 作者：ganjueqi
- 开源协议：GPL-3.0
- 脚本主页：ScriptCat （暂未上传其他渠道）
✨ 主要功能
- ✅ 一键启用：安装脚本后，自动为所有图片添加彩色边框。
- 🎨 自动变色（默认开启）：定时刷新颜色，图片边框会周期性变化。
- 🖱️ 悬浮球控制：屏幕右下角有一个彩色圆形按钮，点击即可打开/关闭控制面板。
- 🎛️ 实时调节：
- 变色速度（滑块）：从慢到快，范围约 500ms ~ 5000ms。
- 边框粗细（滑块）：1px ~ 10px。
- 圆角半径（滑块）：0px ~ 20px。
- 🔄 手动刷新：一键立即为所有图片重新生成随机颜色。
- 📦 智能监听：通过
MutationObserver 自动处理页面动态加载的新图片（如单页应用、懒加载）。
- 🧩 面板独立拖动：悬浮球和控制面板均可分别拖拽到任意位置，互不干扰。
- 📂 折叠面板：“设置”和“关于”为折叠式，点击展开，保持界面整洁。
- 📜 开源声明：GPL-3.0 协议。
🚀 安装与使用方法
1. 安装脚本管理器
如果你还没有用户脚本管理器，请先安装一个：
2. 安装脚本
- 方式一（推荐）：访问脚本发布页（ScriptCat），点击“安装”即可自动安装。
- 方式二：新建脚本，将完整的脚本代码复制粘贴，并保存。
3. 使用控制面板
- 安装后，页面右下角会出现一个彩色圆形按钮（🎨）。
- 单击按钮：打开/关闭控制面板（不会触发拖动）。
- 拖拽按钮：按住并拖动即可移动悬浮球到屏幕任意位置。
- 控制面板：
- 自动变色：复选框开启/关闭自动变色。
- 手动刷新颜色：点击按钮立即刷新所有图片颜色。
- 设置（折叠）：展开后可调节速度、粗细、圆角滑块，数值会实时生效。
- 关于（折叠）：显示作者、日期、版本和开源协议信息。
- 拖拽面板：按住面板空白区域（非控件）可拖动面板到任意位置。
- 关闭面板：点击面板外部任意区域或再次单击悬浮球即可关闭。
💡 提示：所有调节即时生效，无需刷新页面。
⚙️ 配置选项详解
| 选项 |
说明 |
取值范围 |
| 自动变色 |
开启后，脚本会按设定的时间间隔自动刷新所有图片的颜色 |
开/关 |
| 速度 |
自动变色的间隔时间，数值越大颜色变化越慢 |
滑块映射到 500ms ~ 5000ms |
| 粗细 |
边框的宽度 |
1px ~ 10px |
| 圆角 |
边框的圆角半径 |
0px ~ 20px |
所有设置保存在当前内存中，关闭页面后重置为默认值（如需持久化可自行扩展）。
🛠️ 兼容性与性能
- 浏览器：支持 Chrome、Firefox、Edge、Safari 等现代浏览器（需支持
MutationObserver 和 ES6）。
- 网页兼容：适用于大多数网站，包括单页应用（SPA）、懒加载图片。
- 性能：使用
requestAnimationFrame 优化批量着色，MutationObserver 仅处理新增图片，对页面性能影响极小。
❓ 常见问题
**Q：为什么有些图片没有边框？**A：脚本仅对 <img> 标签生效，不处理背景图或 canvas 绘制的图片。另外，如果图片被其他样式覆盖（如 !important），边框可能被覆盖。
**Q：自动变色停止工作了？**A：请检查控制面板中的“自动变色”复选框是否勾选，或尝试点击“手动刷新颜色”按钮。如果仍无效，可刷新页面重试。
**Q：如何彻底关闭脚本？**A：在脚本管理器中禁用或卸载该脚本即可。
**Q：面板位置会保存吗？**A：目前版本不会保存位置，每次页面加载时悬浮球会重置到右下角。
📜 开源协议
本脚本采用 GNU General Public License v3.0 (GPL-3.0) 协议开源。您可以自由使用、修改、分发，但任何衍生作品也必须在相同协议下开源。详细条款请查阅 GPL-3.0 原文。
📝 更新日志
暂无完整更新历史（懒的写了，就这样吧）。
v9.0.2 (2026-08-11) 主要更新：
- 添加 GPL-3.0 许可声明。
- 关于面板精简文字，新增协议显示。
- 增加
@tag 图片边框 便于分类。
💬 反馈与贡献
- 如果您在使用中遇到问题或有改进建议，欢迎通过脚本发布平台（ScriptCat）的评论区留言。
- 目前脚本尚未在 GitHub 托管，暂时不提供 Issue 或 Pull Request 渠道。待后续建立代码仓库后，会开放更多交流方式。
- 感谢您的理解与支持！
感谢使用 图片彩色边框！让浏览器的每一张图片都充满色彩 🌈
