语法 box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色，前两个必填。模糊半径越大边缘越虚；扩展半径正数放大投影、负数收缩，利用它可以只留一圈「描边」光晕。
一个元素可叠加多个阴影，用逗号分隔，第一个在最上层。配合 inset 关键字可把投影收到元素内部，做出凹陷质感；结合 transition 做 hover 光晕是极其常见的按钮交互。
<style> .demo { display:flex; gap:16px; padding:24px; flex-wrap:wrap; } .card { width:110px; height:70px; border-radius:10px; background:#fff; transition: box-shadow .25s; } .c1 { box-shadow: 0 2px 8px rgba(0,0,0,.18); } .c2 { box-shadow: 0 0 0 3px #4a9eff33, 0 8px 24px rgba(74,158,255,.35); } .c3 { box-shadow: inset 0 2px 10px rgba(0,0,0,.25); } .card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.3); } </style> <div class="demo"> <div class="card c1">普通投影</div> <div class="card c2">双层光晕</div> <div class="card c3">内阴影</div> </div>