应避免对含文本的定位元素直接使用opacity，改用rgba()/hsla()控制背景或边框透明度；box-shadow需元素有渲染面积（宽高/内边距）才生效，且应使用rgba颜色值独立控制阴影透明度，并按偏移量从小到大书写多层阴影。
定位元素加 opacity 会连同子元素一起变透明
如果你给一个 position: absolute 或 position: fixed 的元素设了 opacity: 0.7，它的所有子元素（比如文字、图标、按钮）也会变成 70% 透明——这不是错，是设计行为。但实际中常导致文字看不清、交互控件难点击。
更稳妥的做法是：只让背景或边框透明，文字保持不透明。用 rgba() 或 hsla() 替代 opacity：
-
background-color: rgba(255, 255, 255, 0.8);—— 背景半透，文字照常清晰 -
border-color: hsla(0, 0%, 0%, 0.3);—— 边框带透明度，不影响内部内容 - 避免对含文本的定位弹层（如 tooltip、modal overlay）直接用
opacity
box-shadow 在定位元素上失效？先检查尺寸和内容
常见现象：给 position: absolute 的空 div 加了 box-shadow: 0 2px 6px rgba(0,0,0,0.15)，却看不到阴影。
原因很简单：box-shadow 不作用于「不可见区域」。定位元素若没有显式宽高、内边距或内容，渲染引擎就认为它“不存在”，自然不画阴影。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
width/height，或至少padding（哪怕padding: 1px） - 用
min-width: 0+min-height: 0无法触发，它们不产生渲染面积 - 如果元素靠
inset定位（如top: 0; right: 0; bottom: 0; left: 0），需确保父容器有尺寸且非display: inline
阴影颜色用 rgba() 比用 opacity 更可控
很多人习惯写 box-shadow: 0 4px 12px #000; 再配 opacity: 0.2，结果整个元素（包括文字）都发灰。其实阴影本身就能独立控制透明度。
直接在 box-shadow 的颜色值里用 rgba()：
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
这样只有阴影变淡，背景、文字、边框完全不受影响。关键点：
-
rgba(0,0,0,0.15)中的0.15是阴影专属透明度，和元素opacity无关 - 模糊值（如
12px）越大，越需要降低 alpha 值，否则阴影会“糊”得过重 - 深色背景上，
rgba(255,255,255,0.08)比rgba(0,0,0,0.15)更易看清
绝对定位元素叠加多层阴影时，注意层级顺序
box-shadow 支持逗号分隔的多组值，比如：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08);
但要注意：这些阴影按书写顺序从下到上堆叠（第一个最底层，最后一个最上层）。这对定位元素特别重要——比如一个悬浮卡片，你可能想让近处的细微阴影在下，远处的弥散阴影在上。
- 错误写法：
box-shadow: 0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.1);→ 弱阴影盖住了强阴影 - 正确顺序：小偏移+小模糊放前面，大偏移+大模糊放后面
- 不要指望用
z-index控制单个阴影层——z-index对box-shadow无效
transform 影响（可能触发新的 stacking context），又对 box-shadow 的扩散距离敏感。调试时优先确认尺寸、颜色通道、书写顺序这三点，比反复调 opacity 有效得多。 
