box-shadow可直接模拟带阴影感的边框轮廓：设offset-x和offset-y为0，用spread-radius向外撑开、blur-radius控制虚化；加inset实现内阴影；多层阴影按逗号顺序由底向上渲染。
直接用 box-shadow，别碰 border 混搭——除非你明确要保留真实边框。 真正的“边框阴影”不是 border + shadow 的叠加效果，而是用 box-shadow 自身模拟出带阴影感的边框轮廓。很多人卡在阴影偏移太大、看起来像浮空按钮，或写了 inset 却没反应，本质是参数逻辑没理清。
box-shadow 怎么写才像“带阴影的边框”？
关键不是加偏移，而是把水平/垂直偏移设为 0，靠 spread-radius 向外“撑开”阴影，再用 blur-radius 控制虚化程度。这样阴影会均匀包裹元素边缘，视觉上更接近传统边框的延伸感。
-
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15)→ 等效于 2px 宽、微透的实线阴影边框 - 想更柔和？加大
blur-radius：比如0 0 4px 2px rgba(0, 0, 0, 0.1) - 想突出内收感（类似卡片压进一层）？必须加
inset：如inset 0 0 0 1px #ccc - 漏掉
inset却期望内阴影？浏览器会画到元素外面，常被父容器overflow: hidden裁掉，根本看不见
button:hover 时阴影边框怎么变才自然？
悬停时不建议只调颜色透明度——容易显得“脏”，也不推荐单纯放大 spread-radius 导致边框突然变粗。更稳妥的做法是分层控制：保持基础边框感，再叠一层轻微外投影强化抬升。
- 默认状态：
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) - 悬停状态：
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.1) - 必须提前加
transition: box-shadow 0.2s ease在默认规则里，否则首次 hover 没动画 - 避免写
transition: all 0.2s——box-shadow外的属性意外变化会引发重绘抖动
多层 box-shadow 叠加时顺序和性能要注意什么？
逗号分隔的多个阴影，渲染顺序是从左到右、由远及近：最左边的在最底层，最后面的在最上层。这点和 z-index 相反，容易误判主次关系。
- 错误写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 0 0 1px #fff→ 白边被灰影盖住，看不见 - 正确写法：
box-shadow: 0 0 0 1px #fff, 0 2px 4px rgba(0,0,0,0.2)→ 白边在上，灰影托底 - 超过 3 层阴影在低端安卓 WebView 或旧版 Safari 上可能触发卡顿，按钮列表慎用
- 每层都需写全参数，不能省略中间项（如
0 0 #000, 0 4px 8px #333是非法语法）
真正难的不是写出阴影，而是判断哪一层该在前、哪一层该在后，以及在暗色模式下是否手动覆盖 rgba() 中的颜色值——box-shadow 不会自动适配系统主题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
