box-shadow实现内阴影必须显式添加inset关键字，正确写法为box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)；inset须紧接在box-shadow:后，不可省略、错位或加引号；响应式需用媒体查询分段控制，如手机端用inset 0 1px 2px rgba(0,0,0,0.15)。
box-shadow 内阴影怎么写才生效
内阴影不是默认行为，box-shadow 必须显式加 inset 关键字，否则永远是外阴影。很多人写了 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 就以为能“凹进去”，结果只是边缘发虚——那根本不是内阴影。
正确写法是：box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)。注意顺序：inset 必须紧挨着 box-shadow: 后面，不能丢、不能换位置、不能用引号包起来。
- 漏写
inset→ 看不到内凹效果，只看到外发光 -
inset写在值末尾（如0 2px 4px inset）→ 整条声明无效，浏览器忽略整条规则 - 用了
inset但按钮背景色太浅或透明 → 内阴影被“吃掉”，视觉上不明显，建议搭配深色背景或半透明白色文字
响应式下怎么让内阴影随屏幕缩放“跟着变”
纯 CSS 没有“根据屏幕宽度自动缩放 shadow 值”的机制。box-shadow 的偏移、模糊、扩散都只认固定单位（px、rem、em），不支持百分比或视口单位直接驱动阴影大小。
真正可行的方案是：用媒体查询分段控制，而不是试图“动态缩放”。重点不是“多精细地匹配每种宽度”，而是守住几个关键断点，让内阴影在小屏不糊、大屏不单薄。
立即学习“前端免费学习笔记（深入）”；
- 手机（
max-width: 480px）：用inset 0 1px 2px rgba(0,0,0,0.15)—— 模糊值压小，避免小屏下阴影“糊成一片” - 平板（
481px ）：用 <code>inset 0 2px 4px rgba(0,0,0,0.18)—— 平衡清晰度和层次感 - 桌面（
min-width: 769px）：用inset 0 3px 6px rgba(0,0,0,0.2)—— 允许稍强的立体感，但别超过8px模糊，否则像按钮被蒙了层灰
为什么用 rem/em 而不是 px 写 box-shadow
用 px 写死阴影值，在用户缩放页面或系统字体放大时，阴影会“卡住不动”，而按钮本身可能因 font-size 变化导致尺寸微调，造成视觉脱节。用 rem 或 em 能让阴影随基准字号等比缩放，更协调。
推荐统一用 rem，前提是根元素 :root 的 font-size 是可控的（比如用 clamp() 或 JS 动态设）。例如：box-shadow: inset 0 0.125rem 0.25rem rgba(0,0,0,0.15)，对应 2px/4px 在 16px 基准下。
- 用
em会继承父元素字号，嵌套深时容易失控，不建议用于box-shadow - 用
vh/vw写阴影 → 数值会随视口剧烈跳变，手指划动时阴影忽大忽小，体验诡异 - 别为了“适配”强行把所有值都转
rem，如果项目没做字号响应，老实用px+ 媒体查询更稳
内阴影在 Safari 上发虚或消失怎么办
Safari（尤其 iOS 16 之前）对 inset 阴影的抗锯齿处理比较激进，常表现为边缘过度柔化、颜色变淡，甚至整个阴影“消失”。这不是 bug，是 WebKit 渲染策略差异。
最简解决方式：加一层极细的 outline 或强制重绘，但别用 transform: translateZ(0)（会触发新层，反而加重模糊）。稳妥做法是微调参数组合：
- 把模糊值（第二个长度）设为偶数
px（如4px而非3px），WebKit 对偶数采样更友好 - 扩散值（第三个长度）尽量为
0或小正数（如1px），避免负扩散（-1px）—— Safari 对负扩散支持差 - 加
backface-visibility: hidden到按钮上，不增加图层，但能稳定 WebKit 的绘制路径
border-radius 和背景是否带渐变。圆角越大，内阴影越难均匀；背景用 linear-gradient 时，阴影可能被裁掉一部分——这些细节没法靠改 box-shadow 单独解决，得配合 background-clip 或伪元素模拟。 
