box-shadow 能实现内阴影，但必须加 inset 关键字；否则默认为外阴影。内阴影会遮挡内容，且受 float 布局塌陷影响，推荐用 flex 或 inline-block 替代 float 以避免问题。
box-shadow 能不能做出内阴影
可以，但必须配合 inset 关键字，否则默认全是外阴影。很多人写了 box-shadow: 0 2px 4px rgba(0,0,0,.2) 发现阴影总在元素外面，就是漏了 inset。
内阴影本质是“往里压”的视觉效果，所以它对元素内容区域有遮挡关系——文字、子元素会盖在阴影上，这点和外阴影相反。
-
box-shadow: inset 0 2px 4px rgba(0,0,0,.2)是最简可行写法 - 不加
inset就是外阴影，加了才生效，没有中间状态 - 如果用了
border-radius，内阴影会自动贴合圆角，不用额外处理
float 布局下内阴影为什么经常“看不见”
因为 float 元素脱离文档流后，父容器可能高度塌陷，导致内阴影被裁切或压在其他内容下面。这不是 box-shadow 的问题，而是浮动本身的布局副作用。
常见现象：浮动块设置了 inset 阴影，但在页面上完全看不到，或者只看到半截。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
overflow: hidden或auto—— 这会触发 BFC，防止塌陷，让内阴影有渲染空间 - 避免对浮动元素本身设
margin来“撑开”空间，容易错位；优先用父容器 BFC 解决 - 如果浮动块有固定宽高，内阴影通常能正常显示；但如果高度由内容撑开，塌陷就大概率发生
内阴影 + float 在不同浏览器里的表现差异
现代浏览器（Chrome/Firefox/Safari）对 inset 阴影支持一致，但 IE10+ 才开始支持，IE9 及以下完全不认 inset，会直接忽略整条 box-shadow 声明。
如果你的项目还要兼容老 IE，别指望用 box-shadow: inset 实现内阴影，得换方案（比如伪元素 + background 模拟）。
- 可以用
@supports (box-shadow: inset 0 0 0 #000)做特性检测，安全降级 - 不要依赖
filter: drop-shadow()替代，它只支持外阴影，且不触发内阴影的层叠逻辑 - 移动端 Safari 对
inset阴影渲染很稳，不用特别 hack
更稳妥的替代思路：不用 float 怎么保持浮动效果
现在还硬用 float 做布局，等于主动给自己埋坑——内阴影只是第一个暴露的问题。真正省事的做法，是用 display: inline-block 或 display: flex 替代 float，同时保留“内容块靠左/右排列”的视觉效果。
比如侧边栏 + 主内容这种经典双栏，float 不仅要清浮动，还影响 box-shadow 渲染；而 flex 一行代码就能对齐，内阴影照常显示。
-
display: inline-block需注意 HTML 中的换行符会产生间隙，可用font-size: 0或注释消除 -
display: flex下，box-shadow: inset完全不受影响，父子尺寸关系清晰 - 如果必须兼容 IE9，
inline-block是比float更干净的选择
