伪元素多层叠加需父容器设position: relative且所有层设position: absolute和z-index；透明度用rgba而非opacity；定位优先用transform；CSS变量须在继承链定义且不可用于url()。
用 ::before 和 ::after 叠加三层图形时，为什么第二层总被盖住？
伪元素默认渲染顺序是：父元素 → ::before → 子元素 → ::after。但多层叠加时，光靠这个顺序不够——必须显式控制 z-index，且所有参与叠层的伪元素和容器都得是定位元素（position: relative/absolute），否则 z-index 无效。
常见错误是只给 ::after 设 z-index，却忘了给父容器加 position: relative，结果所有伪元素都按文档流层叠，后声明的覆盖前声明的，视觉上就是“第二层消失”。
- 父容器必须设
position: relative（哪怕不偏移） -
::before、::after都要设position: absolute+z-index - 若需第三层，可再套一个子容器，或用同一元素的两个伪元素 + 一个真实子
div，三者分别设不同z-index - 注意：
z-index值只要大小关系正确即可，不一定要连续，比如1/99/200比1/2/3更不容易被意外继承覆盖
怎么让每层图形有独立透明度又不相互混色？
直接在伪元素上设 opacity 会导致整个元素（含子内容）变透，且多层叠加时透明度会相乘（比如两层 opacity: 0.5，实际透出的是 0.25），颜色发灰。更可控的做法是用 background-color 的 rgba 值控制单层背景透明度，或用 background-image 配合半透 png/svg。
- 优先用
background: rgba(0, 0, 0, 0.1)而非opacity: 0.1 - 如果要用渐变或图案，写成
background: linear-gradient(rgba(...), rgba(...)), url(pattern.svg)，rgba 通道只影响该层背景，不影响叠层逻辑 - 避免在父容器设
opacity，它会把所有子层一起压暗，破坏层叠意图
响应式下多层伪元素错位或裁剪怎么办？
伪元素的 top/left 等偏移值若用固定像素（如 top: -20px），在小屏下极易跑出视口或重叠失效；用百分比又容易随容器缩放失真。关键不是“怎么调位置”，而是“用什么基准定位”。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transform: translate()替代top/left，例如transform: translate(-50%, -50%)比top: -50px; left: -50px更稳定 - 尺寸尽量用
vw/vmin或em，避免纯px，比如圆形装饰用width: 8vmin; height: 8vmin - 给父容器加
overflow: hidden防止伪元素溢出干扰布局，但注意这会裁剪掉超出部分——调试时可临时改成visible查看真实范围
用 CSS 变量动态控制某一层显隐或颜色，为什么没生效？
CSS 变量能用在伪元素里，但有两个硬限制：一是变量必须在伪元素的继承链上定义（通常写在 :root 或父选择器里），二是不能用在 content 属性以外的属性里做“字符串拼接”——比如想用变量生成 background-image: url(var(--pattern)) 是无效的，CSS 不支持变量插值到 url() 中。
- 颜色、尺寸、透明度等可直接用：
background-color: var(--layer-2-bg, #ff6b6b) - 显隐控制推荐用
opacity或visibility配合变量，而不是display: none（变量无法触发 display 切换） - 如果需要切换图形，提前定义好多个伪元素（如
::after.layer-a/::after.layer-b），再用 JS 切类名，比硬塞变量进 url() 可靠得多
层叠感的本质不是堆得越多越好，而是每层承担明确视觉角色：底层铺氛围，中层定结构，顶层点睛。一旦某层开始抢主内容焦点，或者需要靠 JS 才能对齐，那多半是定位基准或层级意图没理清。
