box-shadow多层需用逗号分隔且从内到外书写，spread-radius为累积值，inset须前置，border-radius不自动匹配易断裂，阴影不响应鼠标事件，交互需伪元素实现。
box-shadow 多层写法必须用逗号分隔，顺序决定图层叠放
多层 box-shadow 不是“并列设置”，而是按从左到右的顺序逐层绘制，后写的阴影盖在前一层之上。视觉上最外圈的边框必须写在最后，否则会被遮挡。
- 错误写法：
box-shadow: 0 0 0 6px #eee, 0 0 0 2px #333;→ 淡色外圈先画，深色内圈后画，结果只看到深色细线 - 正确写法：
box-shadow: 0 0 0 2px #333, 0 0 0 6px #eee;→ 内圈先画，外圈再套上去，形成双环 - 三重边框各宽 3px：应写成
box-shadow: 0 0 0 3px #333, 0 0 0 6px #eee, 0 0 0 9px #999;，不是3px, 4px, 5px
spread-radius 是累积值，不是单层厚度
box-shadow 的第四个参数 spread-radius 是从元素边界（含 border）向外扩展的总距离，不是每层独立厚度。要算出某圈的实际视觉宽度，得用后一层减前一层。
- 写
0 0 0 2px red, 0 0 0 6px blue→ 红圈厚 2px，蓝圈实际厚 4px（6 − 2） - 想让红、蓝、绿三圈都刚好 2px 宽：写成
0 0 0 2px red, 0 0 0 4px blue, 0 0 0 6px green - 加内边框？必须用
inset，且要前置：box-shadow: inset 0 0 0 2px #666, 0 0 0 4px #ccc;
border-radius 和 box-shadow 不自动匹配，容易边缘断裂
box-shadow 默认不跟随 border-radius 弯曲，尤其当 spread-radius > border-radius 时，四角会露出直角缺口，看起来像边框“断开”。
- 安全做法：确保
spread-radius ≤ border-radius，例如border-radius: 8px时，最大只用8px的 spread - 若必须更厚外框又保圆角，换伪元素方案——
::before绝对定位 + 负margin或transform: scale() - iOS Safari 13–14.4 对
inset多层支持异常，此时inset 0 0 0 2px可能消失或错位，务必实机测试
box-shadow 边框不响应鼠标事件，热区交互必须另做处理
box-shadow 是纯视觉投影，它不参与 hit testing（点击检测），哪怕阴影区域很大，:hover 或 click 也只认元素本体内容区。
- 需要“外圈 hover 触发变色”？不能靠
box-shadow本身，得用::after伪元素模拟，并设pointer-events: auto - 想让整个多重边框区域可点击？要么扩大元素
padding，要么用outline+outline-offset（但outline不支持圆角） - 和真实
border混用时注意：shadow 起点是 border 外沿，不是 content box；调试可用outline: 1px dashed green标出真实边界
box-shadow 就等于三层可交互边框，但鼠标根本“碰不到”外两层。真要控制每层独立响应、变形或动画，伪元素才是唯一可靠路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
