直接给 textarea 或 pre 加 linear-gradient() 无效，因原生控件受 ua 样式限制，background-image 被忽略或降级为纯色；需用伪元素或外层容器模拟渐变背景。
直接用 background-image: linear-gradient() 就能实现，但编辑器容器（如 textarea、contenteditable 元素或代码高亮区域）不支持该属性——必须作用于其父容器或通过伪元素模拟。
为什么直接给 textarea 或 pre 加 linear-gradient() 没反应
原生表单控件（textarea、input）和部分富文本容器（如 div[contenteditable]）的背景渲染受 UA 样式限制，background-image 被忽略或强制降级为纯色。浏览器不会把渐变当作“可继承背景”向下透传。
- 写
textarea { background-image: linear-gradient(to right, red, blue); }→ 大部分浏览器静默回退到background-color（甚至透明） -
pre元素虽可设渐变，但若内部有code标签且设置了background-color，会完全盖掉父级渐变 - VS Code、CodeMirror 等编辑器 UI 本身是 div + canvas + layer 组合，CSS 渐变只能加在最外层 wrapper 上，不能穿透到编辑区底层
contenteditable 区域怎么套渐变背景
必须放弃直接作用于编辑容器的思路，改用定位包裹 + ::before 伪元素绘制渐变层，再确保文字层正常交互。
- 给编辑容器（如
div[contenteditable]）设position: relative和background-color: transparent - 添加
div[contenteditable]::before，设置content: ""、position: absolute、inset: 0、z-index: -1 - 在伪元素上写
background-image: linear-gradient(135deg, #6a11cb, #2575fc)，并配background-size: cover - 如果容器有
border-radius，记得在伪元素上也加相同值，否则圆角处会露底
代码高亮区域（如 pre <code>）加渐变的避坑点
高亮库（Prism、Highlight.js）通常会给 <code> 或行级 <span></span> 设背景色，导致父级渐变不可见。必须切断这层覆盖。
- 先重置：
pre code { background-color: transparent !important; }（!important防被高亮 CSS 覆盖） - 把渐变加在
pre上，并显式设background-repeat: no-repeat和background-size: 100% 100%（cover在窄代码块里易拉伸失真） - 若需圆角+内边距，加
background-clip: padding-box，否则渐变会画到 border 外侧 - 避免用
background: linear-gradient() #fff这类简写——它会清空background-clip和background-origin，导致圆角边缘发虚
编辑器主题里渐变背景的实际生效位置
真正起作用的不是编辑器“内容区”，而是它的 UI 容器：工具栏、侧边栏、状态栏、甚至整个 .monaco-editor 外壳。这些是普通 div，可自由加渐变；而光标所在的内容画布（Canvas 或 textarea）永远只接受纯色。
- VS Code 主题中，渐变只能写在
workbench.colorCustomizations > "editor.background"的 fallback 色上（即纯色），渐变需靠自定义 CSS 注入到.monaco-workbench或.part.editor > .content - CodeMirror 6 推荐在
.cm-editor外层 div 上设渐变，再用overflow: hidden防止滚动时渐变错位 - 所有方案都绕不开一个事实：编辑器核心渲染层（text layout engine）不解析 CSS 渐变，它只管把字符画到 buffer 里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
