HTML盒子阴影box-shadow_HTML容器立体感结构-html教程-PHP中文网

box-shadow 写在 body 上阴影会断开，因 body 默认高度由内容撑开，滚动后超出视口部分不渲染阴影；应加在有明确尺寸或自适应的容器（如、.container）上。

html盒子阴影box-shadow_html容器立体感结构

box-shadow 写在 body 上为什么阴影会断开

因为 body 默认高度由内容撑开，滚动后超出视口的部分不会渲染 box-shadow —— 浏览器只对“当前绘制区域”投射阴影，不是按文档流无限延伸。

真正该加阴影的，是包裹主要内容的容器，比如

、

 或带 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 保证锐利。

											
												
												
													青泥AI
													一款AI论文写作工具，主要用于青泥学术AI写作辅助平台，适合需要提升相关任务效率的用户。
												
												下载
												
											
										
例如模拟 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()

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！