box-shadow 写在 body 上阴影会断开，因 body 默认高度由内容撑开，滚动后超出视口部分不渲染阴影；应加在有明确尺寸或自适应的容器（如、.container）上。
box-shadow 写在 body 上为什么阴影会断开
因为 body 默认高度由内容撑开，滚动后超出视口的部分不会渲染 box-shadow —— 浏览器只对“当前绘制区域”投射阴影，不是按文档流无限延伸。
真正该加阴影的，是包裹主要内容的容器，比如 <main></main>、<div class="container"> 或带 <code>position: relative 的卡片父级。这些元素有明确尺寸或能随内容自适应，阴影才稳定跟随。
- 别给
html或body设box-shadow，除非你手动设了min-height: 100vh且overflow: visible - 若用 Flex/Grid 布局，确保容器没被
overflow: hidden截断阴影边缘 - 检查是否误加了
transform（如scale），它会创建新的层叠上下文，有时干扰阴影裁剪
box-shadow 参数调不准？先盯住 offset 和 blur
box-shadow 的前两个值 h-offset 和 v-offset 决定阴影方向和基础位置，不是“偏移越多越立体”，而是要匹配视觉光源逻辑：通常光源在左上，所以正向 v-offset（向下）+ 正向 h-offset（向右）最自然。
模糊半径 blur 是影响质感的关键：太小（24px）在高 DPI 屏上发虚、失焦。安全区间是 4px–12px，配合 rgba(0,0,0,0.08)–rgba(0,0,0,0.15) 的透明度更耐看。
立即学习“前端免费学习笔记（深入）”；
-
blur不能为负；spread可正可负，但 ±2px 就足够控制卡片“浮起感”或“压入感” - 写错单位（比如漏掉
px）会导致整条声明失效，浏览器静默忽略 - 多层阴影用逗号分隔，但别堆超过 3 层——性能无明显收益，维护成本陡增
想模拟立体边框？两层反向阴影比 border 更可控
单层 box-shadow 无法体现真实立体感；必须用一层浅色高光 + 一层深色阴影，方向相反、偏移量一致、blur: 0 保证锐利。
例如模拟 1px 立体边框：box-shadow: 1px 1px 0 #fff, -1px -1px 0 #aaa。注意顺序：高光写前面，否则会被深色阴影盖住。
- 深色背景上把高光改成
rgba(255,255,255,0.9)，阴影改成rgba(0,0,0,0.1)，避免刺眼 - 圆角元素上慎用大
blur，否则阴影在弧角处糊成一团，失去立体结构感 - 如果元素本身有
border，记得先写border: none，否则真实边框和阴影会打架
内阴影 inset 不是“反向外阴影”，用错就变脏
inset 关键字必须放在整条声明的末尾，且不能和 spread 混淆位置。它让阴影从元素内部向中心投射，适合凹陷按钮、纸张压痕或卡片内嵌效果，但不适合“发光”或“浮起”类需求。
典型错误是写成 box-shadow: inset 0 0 6px #000 后发现整个元素变灰——其实是阴影覆盖了背景色。正确做法是控制颜色明暗对比，例如：box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), inset 0 -2px 4px rgba(255,255,255,0.3)，模拟顶部亮、底部暗的物理受光。
-
inset阴影不随元素transform位移而偏移，它始终锚定在盒模型内部边界 - 不要对
input或textarea直接加inset阴影来模拟聚焦态，优先用:focus-within+ 外阴影更符合用户预期 - 当需要贴合非矩形轮廓（如
border-radius: 50%或 PNG 透明图）时，box-shadow仍按方盒子投射，此时应换filter: drop-shadow()
