图标

🎨 图片彩色边框 – 用户脚本使用指南

为网页上的所有图片自动添加动态彩色边框，让浏览体验更生动。

📖 脚本简介

图片彩色边框 是一款轻量级用户脚本（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. 安装脚本管理器

如果你还没有用户脚本管理器，请先安装一个：

ScriptCat（脚本猫）：Edge 扩展 | 官网 | Chrome 扩展 | Firefox 扩展
Tampermonkey：Chrome 扩展 | Firefox 扩展 | Edge 扩展
Violentmonkey：Chrome 扩展 | Firefox 扩展 | Edge 扩展
Greasemonkey（Firefox）：Firefox 附加组件

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 渠道。待后续建立代码仓库后，会开放更多交流方式。
感谢您的理解与支持！

感谢使用图片彩色边框！让浏览器的每一张图片都充满色彩 🌈

图片彩色边框 - 第9版