CSS box-shadow 盒阴影完全指南：从参数顺序到多层立体投影

在 CSS3 中box-shadow是为元素加投影最常用的属性。它不会占用布局空间不影响盒模型却能让卡片浮起来、让按钮被按下去、让边框像发光一样贴在元素四周。参考文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/box-shadow一、基本语法与参数顺序完整单层写法box-shadow:offset-x offset-y blur-radius spread-radius color inset;按记忆口诀排就是box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 阴影颜色 inset/outset;参数必选说明取值规则offset-x✅水平偏移正值向右负值向左offset-y✅垂直偏移正值向下负值向上CSS 的 y 轴朝下blur-radius❌模糊半径默认 0硬边不能为负越大越淡spread-radius❌扩展半径默认 0正值膨胀、负值收缩color❌阴影颜色不写时多数浏览器取 color 属性值Safari 可能透明建议永远显式写​inset❌内阴影开关不写为外阴影outset写上则阴影落在盒子内部长度值只写两个 → 解析为x/y偏移写三个 → 第三个是blur写四个 → 第四个是spread。二、每个参数到底在干什么1. 水平 / 垂直偏移必写决定光从哪边来影子落到哪边。10px 10px→ 右下-10px 10px→ 左下0 15px→ 正下方最像自然光照当 x、y 都为 0 时阴影在正后方此时若blur/spread非 0会形成一圈均匀光晕。2. 模糊半径 blur不是阴影变长而是边缘变柔。0硬边30px很大很淡的一团规范没有规定精确模糊算法但效果是从完整阴影色过渡到完全透明。3. 扩展半径 spread最容易被忽略正值阴影整体放大一圈比如0 0 0 5px等价于一条同色描边负值阴影收缩常用来抵消blur向左右溢出的光做干净底部阴影0 4px 6px -2px rgba(0,0,0,.1)4. color别用纯黑#000现实中的影子是半透明的。推荐rgba(0,0,0,0.15) ~ rgba(0,0,0,0.25)深色模式再单独调。5. inset 内阴影加了inset阴影画在边框之内即便 border 透明背景之上内容之下视觉上像内容被压进盒子里常用于 input 聚焦、按钮按下态。三、多个阴影逗号分隔第一个在最上层box-shadow:0 2px 4pxrgba(0,0,0,.1),0 4px 8pxrgba(0,0,0,.05);绘制规则从后往前画第一个阴影盖在最上面。也就是说列表里写在前面的层更靠近用户。多层阴影可以模拟真实环境光底层大范围淡阴影 上层近距离深阴影。注意如果一组阴影里有的 inset 有的不 inset列表无法做过渡动画会直接跳变。四、和 border-radius 的关系元素有圆角阴影自动圆角border-radius: 0时阴影就是直角。阴影本身不占布局空间不会把旁边元素挤开——所以悬浮卡片记得自己留margin别让阴影盖到邻居。五、对照你给出的案例.box1:hover{box-shadow:-10px 10px 30px 5px blue outset;}向左10px、向下10px模糊30px、扩展5px比原盒大一圈蓝色外阴影outset可写可不写因为默认就是外阴影.box2:hover{box-shadow:0 15px 30pxrgba(0,0,0,0.2);}这是典型的卡片悬浮写法无水平偏移、向下15px、大模糊、半透明黑看起来像魅族/小米卡片悬浮效果。六、几个新手易踩的坑inset 位置放最前或最后都合法但别塞在颜色前面当颜色用。box-shadow: 0 0 10px #000 inset✅blur 写负无效浏览器按0处理。不写 colorFirefox 用文字色Chrome 偏透明Safari 老版本直接不显示统一显式声明最稳。想要只有底边阴影靠负spread收住左右溢出而不是只调 y。动画性能hover过渡box-shadow没问题但别在列表里混用inset/非inset否则无法插值。七、一句总结box-shadow的本质就是用x/y决定落点blur决定虚实spread决定大小color决定浓度inset决定内外逗号决定层数。把它当光与体积的工具而不是黑色描边的替代品。读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。