# CSS 效果字典 — 注入代码合集

> 本文档收集了 *30+* 个常用且有趣的 CSS 注入片段。每个片段都包含：
> - **名称**（用途）
> - **代码**（可直接复制到控制台或写入 `<style>`）
> - **快速用法**（如何注入／如何移除）

---

## 使用说明（快速上手）
- **在控制台临时注入**：把下面的 CSS 放到一个 `<style>` 标签里再 append 到 `document.head`。例如：
```js
const s = document.createElement('style');
s.textContent = `/* 把你要的 CSS 放在这里 */`;
document.head.appendChild(s);
// 移除： s.remove();
```
- **做成书签脚本（Bookmarklet）**：把单行 JS 从 `javascript:(function(){...})();` 开始保存为书签。
- **长期使用**：推荐用 Stylus（仅 CSS） 或 Tampermonkey（JS 注入）管理。

---

# 目录
1. 纯色背景
2. 渐变背景
3. 大图背景覆盖
4. 模糊背景（玻璃效果）
5. 彩虹文字动画
6. 文字跑马灯
7. 所有链接高亮
8. 可视化网格（布局调试）
9. 居中容器（快速调试页面布局）
10. 旋转页面
11. 倒色模式
12. 灰阶/暗色模式
13. 字体切换（Comic Sans 恶搞）
14. 打字机效果
15. 卡片阴影增强
16. 元素悬停放大（hover zoom）
17. 图片变成圆形并加边框
18. 所有按钮变成圆角并增大
19. 表单输入聚焦样式
20. 隐藏页面元素（广告清理器）
21. 打印友好（去除背景和广告）
22. 代码高亮（简单样式）
23. CSS 变量主题切换器（light/dark）
24. 霓虹发光边框
25. 浮动提示（tooltip 基础样式）
26. 闪烁光标（输入框样式）
27. 页面文字渐隐渐显（fade）
28. 反色/漫画滤镜
29. 模拟夜光（色温调整）
30. 页面水印

---

## 1. 纯色背景
**用途**：快速更换页面背景色

```css
body { background: #f0f8ff !important; }
```
**用法**：把 CSS 放进 `<style>`。移除 style 节点即可。

---

## 2. 渐变背景
**用途**：让页面有现代渐变效果

```css
body {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fbc2eb 100%) !important;
  background-attachment: fixed !important;
}
```

---

## 3. 大图背景覆盖
**用途**：把页面背景替换为在线图片

```css
body {
  background-image: url('https://picsum.photos/1600/900') !important;
  background-size: cover !important;
  background-position: center center !important;
}
```

---

## 4. 模糊背景（玻璃效果）
**用途**：制造“毛玻璃”或模糊背景层

```css
body::before{
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  pointer-events: none;
  z-index: 99998;
}
```

---

## 5. 彩虹文字动画
**用途**：让页面文字颜色循环变化

```css
@keyframes rainbow { 0%{color:#ff0000}20%{color:#ff7f00}40%{color:#ffff00}60%{color:#00ff00}80%{color:#0000ff}100%{color:#8b00ff} }
*{ animation: rainbow 4s linear infinite !important; }
```

---

## 6. 文字跑马灯
**用途**：让段落文字像跑马灯一样滚动（适合短文本）

```css
.marqueeize{
  display:inline-block;
  white-space:nowrap;
  animation: marquee 10s linear infinite;
}
@keyframes marquee{ 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }

/* 使用方法（在控制台把选择的元素加上类）：
document.querySelectorAll('p, h1, h2, li').forEach(el=>el.classList.add('marqueeize'));
*/
```

---

## 7. 所有链接高亮
**用途**：在调研或扒站时一眼看出页面中所有链接

```css
a { outline: 2px dashed #ffb86b !important; }
```

---

## 8. 可视化网格（布局调试）
**用途**：显示 12 列网格帮助布局调试

```css
.grid-debug::before{
  content: "";
  position: fixed; inset:0; pointer-events:none; z-index:99999;
  background-image: linear-gradient(transparent 0 0), linear-gradient(transparent 0 0);
}
/* 更强定制可把背景替换成重复线条或者半透明列 */
```

---

## 9. 居中容器（快速调试页面布局）
**用途**：临时把 body 内主要容器居中并限定宽度

```css
body > * { max-width: 1000px; margin: 0 auto !important; }
```

---

## 10. 旋转页面
**用途**：把页面旋转 180°（搞怪/演示）

```css
html{ transform: rotate(180deg) !important; transform-origin: center center; }
```

---

## 11. 倒色模式
**用途**：整体颜色反转（相当于拍照底片效果）

```css
html{ filter: invert(100%) hue-rotate(180deg) !important; }
```

---

## 12. 灰阶 / 暗色模式
**用途**：将页面转为黑白，或更接近暗色（用于阅读）

```css
html{ filter: grayscale(100%) contrast(90%) !important; }
/* 或者暗色模式 */
:root { --bg:#0f0f12; --fg:#e6e6e6; }
body{ background:var(--bg) !important; color:var(--fg) !important; }
```

---

## 13. 字体切换（Comic Sans 恶搞）
**用途**：瞬间把页面字体切成 Comic Sans

```css
*{ font-family: 'Comic Sans MS', 'Comic Sans', cursive !important; }
```

---

## 14. 打字机效果
**用途**：给指定元素文字加打字机动画（需要把类加到元素）

```css
.typewriter { overflow:hidden; white-space:nowrap; border-right: .12em solid rgba(255,255,255,.75); animation: typing 3s steps(40,end), blink .7s step-end infinite; }
@keyframes typing{ from{ width:0 } to{ width:100% } }
@keyframes blink{ 50%{ border-color: transparent } }
```

---

## 15. 卡片阴影增强
**用途**：让页面中常见卡片组件更醒目

```css
.card, .panel, .box { box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important; border-radius: 12px !important; }
```

---

## 16. 元素悬停放大（hover zoom）
**用途**：鼠标移上去时微放大，做交互提示

```css
* { transition: transform .18s ease-in-out !important; }
*:hover { transform: translateZ(0) scale(1.02) !important; }
```

---

## 17. 图片变成圆形并加边框
**用途**：把页面所有图片做成头像样式

```css
img { border-radius: 999px !important; border: 3px solid rgba(255,255,255,0.6) !important; object-fit: cover; }
```

---

## 18. 所有按钮变成圆角并增大
**用途**：改善按钮可点击面积

```css
button, input[type=button], input[type=submit], .btn { border-radius: 999px !important; padding: .8em 1.2em !important; font-weight:600; }
```

---

## 19. 表单输入聚焦样式
**用途**：给输入框加聚焦高亮

```css
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(66,153,225,0.6) !important; box-shadow: 0 0 0 4px rgba(66,153,225,0.12) !important; }
```

---

## 20. 隐藏页面元素（广告清理器）
**用途**：删除常见广告容器或悬浮元素

```css
iframe, .ad, .ads, [id*='ad'], [class*='ad-'] { display: none !important; visibility: hidden !important; }
```

---

## 21. 打印友好（去除背景和广告）
**用途**：在打印前快速隐藏不必要的元素

```css
@media print {
  body { background: white !important; color: black !important; }
  iframe, .ad, nav, footer, .sidebar { display: none !important; }
}
```

---

## 22. 代码高亮（简单样式）
**用途**：给 `<code>` / `<pre>` 添加基础美化

```css
pre, code { background:#0b0b0b; color:#e6e6e6; padding:.4em .6em; border-radius:6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Helvetica Neue', monospace; }
```

---

## 23. CSS 变量主题切换器（light/dark）
**用途**：示范如何用变量快速切换主题

```css
:root{ --bg:#ffffff; --fg:#111111; }
[data-theme='dark']{ --bg:#0b0b0f; --fg:#e6e6e6; }
body{ background:var(--bg) !important; color:var(--fg) !important; }
/* JS 切换： document.documentElement.setAttribute('data-theme','dark'); */
```

---

## 24. 霓虹发光边框
**用途**：给重要元素加炫酷发光边框

```css
.neon { box-shadow: 0 0 8px rgba(255,0,111,0.6), inset 0 0 6px rgba(255,0,111,0.2); border:1px solid rgba(255,0,111,0.5); border-radius:10px; }
```

---

## 25. 浮动提示（tooltip 基础样式）
**用途**：给带 `data-tooltip` 的元素显示悬浮提示

```css
[data-tooltip]{ position:relative; }
[data-tooltip]:hover::after{ content: attr(data-tooltip); position:absolute; left:50%; transform:translateX(-50%); bottom:120%; white-space:nowrap; padding:.3em .6em; background:#111;color:#fff;border-radius:6px; font-size:12px; }
```

---

## 26. 闪烁光标（输入框样式）
**用途**：增强输入框的视觉焦点

```css
input[type='text']{ caret-color: #ff5c7c; }
input[type='text']::placeholder{ opacity: .7; }
```

---

## 27. 页面文字渐隐渐显（fade）
**用途**：页面加载时做个渐入动画，提升体验

```css
.fade-in *{ opacity:0; transform: translateY(6px); animation: fadein .6s forwards; }
@keyframes fadein{ to{ opacity:1; transform:none; } }
/* 使用： document.body.classList.add('fade-in') */
```

---

## 28. 反色 / 漫画滤镜
**用途**：把页面变成卡通/漫画风格

```css
html{ filter: contrast(150%) saturate(130%) sepia(10%) !important; }
```

---

## 29. 模拟夜光（色温调整）
**用途**：降低蓝光，适合晚间阅读

```css
html{ filter: sepia(10%) hue-rotate(-20deg) brightness(0.95) !important; }
```

---

## 30. 页面水印
**用途**：给页面加浮动水印（仅视觉）

```css
body::after{
  content: '仅供测试 — 树萌芽';
  position: fixed; right: 10px; bottom: 10px; opacity: .12; font-size: 14px; pointer-events:none;
}
```

---

## 额外：通用注入 / 开关 模板（JS）
把下面的 JS 复制到控制台或做成书签，一键注入或移除指定的 CSS：

```js
(function toggleCSS(id, css){
  let s = document.getElementById(id);
  if(s){ s.remove(); return 'removed'; }
  s = document.createElement('style'); s.id = id; s.textContent = css; document.head.appendChild(s); return 'added';
})('my-fun-css', 'body{ background: #ffdead !important; }');
```

- 把 `my-fun-css` 改成有意义的 id，把 css 换成任意上面的片段。

---

## Tampermonkey 用户脚本模板（自动注入）
```js
// ==UserScript==
// @name         Inject Custom CSS
// @namespace    http://tampermonkey.net/
// @version      0.1
// @match        *://*/*
// @grant        none
// ==/UserScript==
(function(){
  'use strict';
  const css = `/* 把 CSS 放这里 */`;
  const s = document.createElement('style'); s.textContent = css; document.head.appendChild(s);
})();
```


