早年间我在带团队做前端培训的时候发现一个很有意思的现象新人们写border-radius和background都能上手很快唯独一碰到box-shadow画风就变成“从 UI 稿里复制粘贴”或者从旧项目里扒一段带!important的阴影代码过来改个颜色就交差。你问他这六个值分别控制什么能不能现场写一个“右侧重、下方轻、带一点内收感”的投影他立马卡壳。其实不怪大家记不住。box-shadow这玩意儿的语法本身就容易让人退避三舍一长串值要空格分隔数值有正有负颜色后面还可能跟个inset再加上网上教程动不动就甩出八参数模板读起来像天书。但这恰恰是box-shadow最反直觉的地方——它的语法看着唬人拆开之后本质上就是一张“快递单”。本篇我就用这个思路把边框阴影彻底拆碎从参数语义、常见变体、实战场景到性能避坑和面试套路一次性讲透。内容面向前端初学者、刚转岗的初级开发也适合拿来做面试复盘的老手。1. 先别背八个值把 box-shadow 当成一张“物品递送单”来读理解box-shadow最忌讳的姿势是死记硬背。因为它的参数顺序虽然固定但每个参数本身是有明确物理含义的你一旦理解了这些含义根本不需要背。1.1 阴影的本质不是装饰是“一个物体的复制品沿着方向被推走”我之前带过一个实习生他看box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)这个写法第一反应是“阴影就是给元素描个边”。这个理解偏差很大。描边是border和outline的活儿阴影的本质是把当前元素的形状复制一份沿着某个方向平移再把复制品做模糊处理叠在原元素下方或内部。你想象一个场景晚上站在路灯下自己的影子并不会老老实实贴着脚底而是沿着光线方向被拉长、偏移、边缘变虚。box-shadow做的就是这个物理现象的计算模拟。它先把你这个元素一个矩形、一个圆形按钮甚至一个带border-radius的异形块当作一个“不透明的形状”然后按你指定的偏移量把它复制到目标位置用模糊半径把复制品的边缘打磨柔和再用扩散半径决定这个复制品是变大一圈还是缩小一圈最后按你指定的颜色和透明度上色。这个底层逻辑决定了后面很多参数的行为。比如你给一个圆形按钮加阴影阴影的形状也是圆的你给一个clip-path裁剪过的多边形加阴影阴影也会跟着变成多边形。所以在调试阴影形状不对的时候先检查元素本身的形状而不是傻傻调阴影参数。1.2 参数逐个对应快递单上的字段把box-shadow拆开看完整语法是box-shadow: h-offset v-offset blur spread color inset;我第一次给新人讲这个的时候发现他们记不住谁先谁后尤其是blur和spread老是搞反。后来我想了个办法直接类比成寄快递h-offset水平偏移相当于快递单上的“省份”决定影子往左还是往右走正值走右负值走左。v-offset垂直偏移相当于“城市”决定影子往上还是往下飘正值往下负值往上。blur模糊半径相当于包装的“气泡膜厚度”值越大边缘越糊轮廓越虚影子越朦胧。spread扩散半径相当于“箱子尺寸”正值让影子比原物大一圈负值让影子比原物缩一圈。注意它只是缩放阴影本体不影响原元素尺寸。color颜色相当于“快递单上的备注栏”决定影子是什么颜色、什么透明度。inset内阴影相当于“特殊服务——送货上门还负责把东西放进你抽屉里”把原本在元素外面的影子翻转到元素内部。这六个字段一对应完语法顺序基本就不会错了。因为你先得告诉浏览器“影子往哪走”再告诉它“影子糊不糊”、“影子大不大”最后才告诉它“影子什么色”、“要不要塞进元素里面”。这个顺序和人类认知“先看位置再看样子最后看颜色”的直觉完全一致。1.3 一个速查表方便随时对照参数全称接受的值正值效果负值效果是否必须有h-offset水平偏移量长度值阴影向右移动阴影向左移动是v-offset垂直偏移量长度值阴影向下移动阴影向上移动是blur模糊半径长度值非负边缘越模糊不允许负值可选spread扩散半径长度值阴影比元素大阴影比元素小可选color阴影颜色颜色值——可选不写默认当前文字色inset内阴影关键字inset阴影置于元素内部—可选逗号分隔多重阴影,——可选这里有个特别容易被忽略的细节h-offset和v-offset是必填项其余都是可选。很多人写阴影只写0 0 10px red以为前面两个0可以省略实际上是省不掉的——哪怕影子不偏移你也得用它占住位置否则浏览器会直接忽略整条阴影声明。2. 六个参数逐步拆解每个都配一个能肉眼看出变化的案例基础概念说完这一节就动手。我建议你打开浏览器的开发者工具随便选一个div元素边看边改五分钟后你对box-shadow的掌控感会提升一个台阶。2.1 偏移量正值不等于“右下角”正负号要看坐标轴先看两条最简单的阴影/* 阴影向右下方偏移 5px */ box-shadow: 5px 5px 0 0 #000; /* 阴影向左上方偏移 5px */ box-shadow: -5px -5px 0 0 #000;不少初学者会误以为“正值一定往右下角跑”。严格来说这个理解只对了一半。h-offset正负控制左右v-offset正负控制上下两个一组合理论上产生了四种方向组合右下正正、左下负正、右上正负、左上负负。前端坐标系里x 轴向右为正y 轴向下为正所以 “正值偏右、正值偏下” 只是其中一种。含金量更高的一个冷知识是box-shadow的方向不会跟随元素自身的transform旋转而改变。我给一个div加了transform: rotateY(60deg) translateZ(300px)做 3D 翻转阴影仍然按页面坐标原方向投射不会跟着元素一起转。这对做 3D 卡片动效的开发者相当重要——你想让阴影在 3D 空间里也自然“躺”在卡片下方需要额外用filter: drop-shadow()配合或者干脆把阴影做进背景层。我当年做 3D 轮播图就栽过这个跟头阴影方向不对整个立体感全崩了。2.2 模糊半径边缘是如何从“生硬”渐变到“朦胧”的0 0 0 0 #000是没有任何模糊的影子边缘像刀切一样硬。一旦blur变大边缘会从中心向两侧做均匀渐变渐变的范围在数学上约等于模糊半径本身也就是说一个blur: 10px的阴影视觉上向外“渗”出的范围大约就是 10px。box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8); /* 边缘开始柔和 */ box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.3); /* 大面积弥散光晕 */注意这里有个搭配规则阴影颜色越深模糊半径就要越小否则影子会脏成一片。而颜色浅的时候模糊半径可以调大形成一种类似“光晕”的效果。我见过很多新手把blur和颜色透明度同时拉满结果做出来的不是阴影而是煤灰堆。常用的经验值是阴影rgba(0,0,0,0.1)时blur至少给到16px起步颜色越深blur往8px、4px收缩。2.3 扩散半径改变的是阴影的“胖瘦”不是位置spread是最容易被忽略的参数因为从字面上很难立刻想象出它的作用。它控制的是阴影相对原元素放大或缩小的量正值让阴影向四周均匀扩张负值向内收缩。/* 阴影向外扩张 6px形成描边效果 */ box-shadow: 0 0 0 6px #42b983; /* 阴影向内收缩 6px只在元素边缘露出一点光晕 */ box-shadow: 0 0 0 -6px #42b983;当偏移量、模糊半径都是0只有spread有值时你得到的是一个和元素形状完全一致、边缘锐利的色块。把这个技巧配合border-radius可以做到非常干净的描边效果甚至比border更好用因为box-shadow的扩散描边不会占用布局空间也不影响元素实际尺寸。后面第 3 节我会专门讲怎么用这个特性做“伪边框”。2.4 颜色透明度才是阴影是否“高级”的分水岭阴影颜色有两层讲究。第一层是色相选择第二层是透明度控制。二者叠加起来决定了阴影是“悬浮感”还是“贴地感”。大多数 UI 设计稿里阴影色不会直接用纯黑#000而是用带有一定透明度的黑比如rgba(0, 0, 0, 0.15)。为什么因为真实世界里的影子并不是纯黑的它会受环境光影响颜色和物体底部地面的颜色有微弱关系。rgba能模拟这种“半透明的空气感”。如果你用纯黑透明度 1阴影会像张贴纸一样生硬。具体到取色的时候给小白一个可以直接套的思路背景色越浅阴影透明度越低背景色越深透明度越高。浅灰背景上rgba(0,0,0,0.12)就能看出层次深蓝背景上可能需要rgba(0,0,0,0.35)才有存在感。另外彩色阴影也不是禁区设计师经常用和主题色同色系的深色做彩色阴影比如琥珀色按钮配rgba(219, 154, 4, 0.35)的阴影质感会明显提升。2.5 inset把影子翻进盒子里模拟“陷进去”的视觉inset的作用是把原本投射在元素外部的阴影翻转到元素内部。语法上放在整条阴影声明的末尾或开头都行浏览器解析结果一样但团队规范里一般固定在末尾方便统一阅读。box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);内阴影最常见的场景是模拟凹陷、凹槽、按钮按下去的物理状态。比如一个真实感较强的仪表盘外圈要用外阴影突出立体内部刻度凹槽要用内阴影制造下沉感。还有一个很经典的用法结合border-radius: 50%和内侧渐变做出类似手机 App 图标那种凹陷质感。3. 三个高频变体操作多重阴影、负扩散、内阴影叠加box-shadow真正产生质变的地方在于它能接受逗号分隔的多组值。这意味着同一元素身上可以同时挂多套阴影它们会按照先写的在上、后写的在下的规则叠放。这一小节聊三个实战价值极高的变体用法。3.1 多重阴影一个元素同时拥有“光晕、描边、投影”三份装饰box-shadow: 0 0 0 2px #f00, /* 红色描边紧贴元素 */ 0 4px 10px rgba(0,0,0,0.2), /* 常规投影 */ 0 0 30px rgba(255,0,0,0.1); /* 红色光晕 */三条阴影叠加后视觉层次非常丰富。但要提醒一句每多一条阴影浏览器名都多一次绘制计算这在低端移动设备上会造成肉眼可见的掉帧。实战里同一元素挂三条以上阴影的场景尽量收敛实在要挂优先考虑用::before、::after伪元素分拆把绘制压力分散到不同的层。3.2 spread 取负值用 0 偏移 0 模糊做“内收光边”/* 在元素内侧形成一圈 4px 的暗色收边 */ box-shadow: 0 0 0 -4px rgba(0, 0, 0, 0.5);这个写法很妙。偏移是0模糊是0只有扩散是负数于是阴影从四周向内收缩 4px形成一圈紧贴元素边缘的内侧阴影。对于卡片类组件右侧和下方都做外阴影、左上角做一点负扩散阴影可以营造出“边框下方有厚度”的立体感比单纯加border更细腻。还有个小技巧负扩散配合浅色能做“高光内框”。比如在深色背景上给按钮加一圈0 0 0 -2px rgba(255,255,255,0.6)的白色内缩阴影看起来就像按钮边缘被打了一圈光边非常提神。3.3 inset 配合 transition让按压反馈从“生硬”变“顺滑”前端做按钮交互时最常见的反馈方式是在:active状态加内阴影。但直接把box-shadow从外阴影切到内阴影中间没有过渡会显得很生硬。解决办法是先给元素一个常态的外阴影在:active里同时把inset阴影的透明度、扩散值调整一下.button { transition: box-shadow 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .button:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }因为transition监听的是box-shadow整体变化浏览器会尝试在两组值之间做插值。只要参数数量、位置相同过渡效果就是平滑的。这个细节很多新手不知道做完之后感觉“好像没那么跟手”原因就是少了这段transition。4. 从会写到会用四个能直接抄进项目的实用场景有了语法基础下面进入实战。我挑了几个前端项目里最常用的阴影场景每个都给出完整代码和设计思路。4.1 卡片悬浮阴影常态、悬浮态、深色主题三档卡片是box-shadow出现频率最高的组件。一套比较完整的卡片阴影命名建议拆成三个状态shadow-sm常态、shadow-md悬浮、shadow-lg强调。.card { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); } .card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.10), 0 12px 24px rgba(0,0,0,0.08); }这里为什么用两组阴影叠加第一组负责近处轮廓阴影小、清晰第二组负责远处氛围阴影大、模糊组合起来更接近真实光线下的多层次投影。深色主题下把黑阴影换成带有主品牌色的深色阴影透明度整体调低一档防止黑乎乎一片。4.2 按钮按压反馈与涟漪光圈扩散除了内阴影按压现在很多后台管理系统喜欢用“光圈扩散”这种带呼吸感的按钮反馈效果。做法是给按钮挂一个初始透明度为 0 的光晕阴影在点击时通过动画把它扩散出去。.btn { position: relative; box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); animation: ripple 1.2s infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(64, 158, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0); } }这个效果的关键是动画过程中把spread从0逐渐放大到12px同时把颜色的透明度从0.4降到0。从视觉上看就像一个涟漪从按钮边缘向外扩散然后消失。需要提醒的是这种动画会持续触发绘制按钮数量多、动画时长长的场景慎用否则 CPU 占用会明显升高。4.3 双层光晕实现“呼吸灯”提示效果给重要操作按钮比如下载、提交加呼吸灯通常需要两种颜色光晕交替比纯白色呼吸更有存在感。.glow { animation: breathe 2s ease-in-out infinite; } keyframes breathe { 0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 180, 50, 0.5); } 50% { box-shadow: 0 0 20px 6px rgba(255, 180, 50, 0.8); } }这里的光晕层次来自blur和spread同时增大大到一定程度后颜色开始发核心亮光。注意如果元素本身是圆角矩形光晕也会跟着圆角形状扩散不会出现生硬的方块光边。4.4 拟物按钮用外阴影 内阴影还原 iOS 立体感拟物设计虽然不如扁平风流行但在设置页开关、播放器控制键里仍有很强存在感。做这种效果外阴影负责“抬起来”内阴影负责“边缘压下去”。.ios-btn { background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), /* 右下投下的硬影 */ -6px -6px 12px rgba(255, 255, 255, 0.9), /* 左上高光 */ inset -2px -2px 4px rgba(255, 255, 255, 0.5), inset 2px 2px 4px rgba(0, 0, 0, 0.1); }这种四段阴影叠加的写法我强烈建议新手都手敲一遍。敲完之后你会发现所谓“高级阴影”不过就是把偏移方向、正负扩散、内外翻转这几个参数组合出了变化而已。5. 性能、兼容性与调试技巧这些坑我基本都踩过光会写样式不算真本事线上出问题还能快速定位才是。这一节讲box-shadow在真实项目里的几个隐藏坑。5.1 大面积模糊阴影千万不要做连续动画box-shadow属于绘制属性它不像transform和opacity那样可以走 GPU 合成。虽然现代浏览器对静态阴影已经做了大量优化但一旦用 JavaScript 每帧修改blur或spread就会触发大量的重绘。我在移动端项目里实测过一个全屏白色弹窗阴影blur: 60px且跟随手势移动帧率能直接从 60fps 掉到 20fps 左右。解决方案是分层处理阴影层固定在底层需要做动画的元素本体从阴影层里分离出来各自独立避免大量区域的重绘。5.2 兼容性速查哪些写法和浏览器会闹脾气基础box-shadow语法从 IE9 开始就支持了但高级用法有差别。旧版火狐需要-moz-前缀旧版 Safari/Chrome 需要-webkit-前缀。现在的主流浏览器Chrome 90Firefox 84Safari 14已经可以不加前缀直接使用。真正容易中招的是这几个边缘场景当同时使用border-radius和box-shadow时阴影默认跟随圆角弧度但早期 Safari 对“圆角矩形 大模糊阴影”组合处理有 bug会出现阴影直角。inset阴影在部分浏览器的打印样式media print下会莫名消失需要额外用border兜底。带透明度的颜色写成rgba兼容性最好不要用十六进制后拼字母透明度例如#ff000080旧版浏览器解析不了。5.3 用 DevTools 实时调试比反复刷新快十倍Chrome DevTools 的 Styles 面板里box-shadow那一行左侧有个小方块图标点击后可以直接鼠标拖拽阴影方向和模糊值。更实用的一个技巧是直接在 Elements 面板里选中元素然后在控制台里输入$0.style.boxShadow 0 0 30px 2px gold改完即所见不用刷新页面。如果项目里阴影比较多建议统一抽成 CSS 变量在根节点一次调整比如:root { --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); }这样后续要改全局阴影风格只要在:root里改一处即可。5.4 filter: drop-shadow() 和 box-shadow 的区别面试里经常被问到日常开发也容易混淆。两种阴影的核心差异在于作用对象box-shadow作用于元素的盒模型边框它严格遵守元素的矩形轮廓哪怕是圆角矩形也只是四个角变圆。filter: drop-shadow()作用于元素的渲染结果它能把经过clip-path裁剪、PNG 透明图、带::before伪元素的形状都识别出来并打上阴影。简单说如果你有一个不规则图形想让阴影完全贴合形状轮廓只能用drop-shadow。代价是它的性能比box-shadow差且不支持inset、不支持多重阴影叠加。所以常规矩形卡片、按钮用box-shadow图标、异形图用drop-shadow。6. 面试和团队规范里关于 box-shadow 的那些“隐性考点”最后这部分写给准备面试或正在带团队的朋友。box-shadow在面试题里出现频率不低但考察方式往往不是让你背参数而是看你能不能把它的特性用在实际问题里。6.1 高频题如何实现一个 1px 的细描边而不占用布局空间常规思路是用border: 1px solid #ccc但如果这个元素是要做悬浮改变描边颜色的用border会导致布局抖动因为边框占据空间。标准答案是用box-shadow: 0 0 0 1px #ccc这样描边不占空间视觉上与边框无异并且如果要改颜色只要在相同位置替换box-shadow即可。如果想让描边带圆角只要元素本身设置了border-radius阴影就会自动跟随。但注意这个做法有缺陷box-shadow是绘制在元素外部的它不会触发鼠标事件响应区域。如果你需要这个 1px 描边区域也能点击还是得用真正的边框或outline。面试时能说出这个差异会让面试官觉得你有实战经验。6.2 团队规范里box-shadow 该怎么统一管理我在带团队时定过三条规范效果不错分享出来供参考所有阴影值封装为 CSS 变量不允许在业务代码里直接写0 0 10px #eee这种魔法值。同一套 UI 体系只保留 3~4 档阴影变量--shadow-sm、--shadow-md、--shadow-lg传递层级关系而不是随意发挥。强调色不要用纯黑阴影必须使用rgba并控制透明度保证在深色背景上不会发灰。这三条本质上是让阴影服务于设计系统的一致性而不是每个组件各自为政。设计交付后前端只要对照变量替换即可整个页面的阴影层级会非常干净。6.3 一个冷知识box-shadow 不会触发 layout但会触发 paint很多前端对性能有误解以为“属性变化只要不走 layout 就没事”。box-shadow确实不会改变元素几何尺寸所以不会触发重排但你每次修改它浏览器都需要重新绘制受影响的区域。对于大面积区域频繁改阴影的动效依然会卡。理解这个区别在排查卡顿时就不会只盯着transform和width了。写到这里我想起最开始学box-shadow时自己也栽过不少跟头有段时间特别迷信复杂阴影什么按钮都套个五层阴影结果移动端一渲染直接掉帧后来明白了一个道理阴影本质上是为了表达元素与背景之间的“距离感”距离越大阴影越柔和、越扩散距离越小阴影越清晰、越紧凑。你只要抓住了这个核心写出来的阴影即使参数复杂也不会让人觉得“脏”。如果读这篇的你正在为阴影效果发愁不用急先把六个参数在 DevTools 里各调一遍再把今天这几个场景手敲一遍回头再看设计稿上的阴影基本就能一眼反推参数了。
CSS box-shadow 终极拆解：六个参数与实战避坑指南
早年间我在带团队做前端培训的时候发现一个很有意思的现象新人们写border-radius和background都能上手很快唯独一碰到box-shadow画风就变成“从 UI 稿里复制粘贴”或者从旧项目里扒一段带!important的阴影代码过来改个颜色就交差。你问他这六个值分别控制什么能不能现场写一个“右侧重、下方轻、带一点内收感”的投影他立马卡壳。其实不怪大家记不住。box-shadow这玩意儿的语法本身就容易让人退避三舍一长串值要空格分隔数值有正有负颜色后面还可能跟个inset再加上网上教程动不动就甩出八参数模板读起来像天书。但这恰恰是box-shadow最反直觉的地方——它的语法看着唬人拆开之后本质上就是一张“快递单”。本篇我就用这个思路把边框阴影彻底拆碎从参数语义、常见变体、实战场景到性能避坑和面试套路一次性讲透。内容面向前端初学者、刚转岗的初级开发也适合拿来做面试复盘的老手。1. 先别背八个值把 box-shadow 当成一张“物品递送单”来读理解box-shadow最忌讳的姿势是死记硬背。因为它的参数顺序虽然固定但每个参数本身是有明确物理含义的你一旦理解了这些含义根本不需要背。1.1 阴影的本质不是装饰是“一个物体的复制品沿着方向被推走”我之前带过一个实习生他看box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)这个写法第一反应是“阴影就是给元素描个边”。这个理解偏差很大。描边是border和outline的活儿阴影的本质是把当前元素的形状复制一份沿着某个方向平移再把复制品做模糊处理叠在原元素下方或内部。你想象一个场景晚上站在路灯下自己的影子并不会老老实实贴着脚底而是沿着光线方向被拉长、偏移、边缘变虚。box-shadow做的就是这个物理现象的计算模拟。它先把你这个元素一个矩形、一个圆形按钮甚至一个带border-radius的异形块当作一个“不透明的形状”然后按你指定的偏移量把它复制到目标位置用模糊半径把复制品的边缘打磨柔和再用扩散半径决定这个复制品是变大一圈还是缩小一圈最后按你指定的颜色和透明度上色。这个底层逻辑决定了后面很多参数的行为。比如你给一个圆形按钮加阴影阴影的形状也是圆的你给一个clip-path裁剪过的多边形加阴影阴影也会跟着变成多边形。所以在调试阴影形状不对的时候先检查元素本身的形状而不是傻傻调阴影参数。1.2 参数逐个对应快递单上的字段把box-shadow拆开看完整语法是box-shadow: h-offset v-offset blur spread color inset;我第一次给新人讲这个的时候发现他们记不住谁先谁后尤其是blur和spread老是搞反。后来我想了个办法直接类比成寄快递h-offset水平偏移相当于快递单上的“省份”决定影子往左还是往右走正值走右负值走左。v-offset垂直偏移相当于“城市”决定影子往上还是往下飘正值往下负值往上。blur模糊半径相当于包装的“气泡膜厚度”值越大边缘越糊轮廓越虚影子越朦胧。spread扩散半径相当于“箱子尺寸”正值让影子比原物大一圈负值让影子比原物缩一圈。注意它只是缩放阴影本体不影响原元素尺寸。color颜色相当于“快递单上的备注栏”决定影子是什么颜色、什么透明度。inset内阴影相当于“特殊服务——送货上门还负责把东西放进你抽屉里”把原本在元素外面的影子翻转到元素内部。这六个字段一对应完语法顺序基本就不会错了。因为你先得告诉浏览器“影子往哪走”再告诉它“影子糊不糊”、“影子大不大”最后才告诉它“影子什么色”、“要不要塞进元素里面”。这个顺序和人类认知“先看位置再看样子最后看颜色”的直觉完全一致。1.3 一个速查表方便随时对照参数全称接受的值正值效果负值效果是否必须有h-offset水平偏移量长度值阴影向右移动阴影向左移动是v-offset垂直偏移量长度值阴影向下移动阴影向上移动是blur模糊半径长度值非负边缘越模糊不允许负值可选spread扩散半径长度值阴影比元素大阴影比元素小可选color阴影颜色颜色值——可选不写默认当前文字色inset内阴影关键字inset阴影置于元素内部—可选逗号分隔多重阴影,——可选这里有个特别容易被忽略的细节h-offset和v-offset是必填项其余都是可选。很多人写阴影只写0 0 10px red以为前面两个0可以省略实际上是省不掉的——哪怕影子不偏移你也得用它占住位置否则浏览器会直接忽略整条阴影声明。2. 六个参数逐步拆解每个都配一个能肉眼看出变化的案例基础概念说完这一节就动手。我建议你打开浏览器的开发者工具随便选一个div元素边看边改五分钟后你对box-shadow的掌控感会提升一个台阶。2.1 偏移量正值不等于“右下角”正负号要看坐标轴先看两条最简单的阴影/* 阴影向右下方偏移 5px */ box-shadow: 5px 5px 0 0 #000; /* 阴影向左上方偏移 5px */ box-shadow: -5px -5px 0 0 #000;不少初学者会误以为“正值一定往右下角跑”。严格来说这个理解只对了一半。h-offset正负控制左右v-offset正负控制上下两个一组合理论上产生了四种方向组合右下正正、左下负正、右上正负、左上负负。前端坐标系里x 轴向右为正y 轴向下为正所以 “正值偏右、正值偏下” 只是其中一种。含金量更高的一个冷知识是box-shadow的方向不会跟随元素自身的transform旋转而改变。我给一个div加了transform: rotateY(60deg) translateZ(300px)做 3D 翻转阴影仍然按页面坐标原方向投射不会跟着元素一起转。这对做 3D 卡片动效的开发者相当重要——你想让阴影在 3D 空间里也自然“躺”在卡片下方需要额外用filter: drop-shadow()配合或者干脆把阴影做进背景层。我当年做 3D 轮播图就栽过这个跟头阴影方向不对整个立体感全崩了。2.2 模糊半径边缘是如何从“生硬”渐变到“朦胧”的0 0 0 0 #000是没有任何模糊的影子边缘像刀切一样硬。一旦blur变大边缘会从中心向两侧做均匀渐变渐变的范围在数学上约等于模糊半径本身也就是说一个blur: 10px的阴影视觉上向外“渗”出的范围大约就是 10px。box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8); /* 边缘开始柔和 */ box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.3); /* 大面积弥散光晕 */注意这里有个搭配规则阴影颜色越深模糊半径就要越小否则影子会脏成一片。而颜色浅的时候模糊半径可以调大形成一种类似“光晕”的效果。我见过很多新手把blur和颜色透明度同时拉满结果做出来的不是阴影而是煤灰堆。常用的经验值是阴影rgba(0,0,0,0.1)时blur至少给到16px起步颜色越深blur往8px、4px收缩。2.3 扩散半径改变的是阴影的“胖瘦”不是位置spread是最容易被忽略的参数因为从字面上很难立刻想象出它的作用。它控制的是阴影相对原元素放大或缩小的量正值让阴影向四周均匀扩张负值向内收缩。/* 阴影向外扩张 6px形成描边效果 */ box-shadow: 0 0 0 6px #42b983; /* 阴影向内收缩 6px只在元素边缘露出一点光晕 */ box-shadow: 0 0 0 -6px #42b983;当偏移量、模糊半径都是0只有spread有值时你得到的是一个和元素形状完全一致、边缘锐利的色块。把这个技巧配合border-radius可以做到非常干净的描边效果甚至比border更好用因为box-shadow的扩散描边不会占用布局空间也不影响元素实际尺寸。后面第 3 节我会专门讲怎么用这个特性做“伪边框”。2.4 颜色透明度才是阴影是否“高级”的分水岭阴影颜色有两层讲究。第一层是色相选择第二层是透明度控制。二者叠加起来决定了阴影是“悬浮感”还是“贴地感”。大多数 UI 设计稿里阴影色不会直接用纯黑#000而是用带有一定透明度的黑比如rgba(0, 0, 0, 0.15)。为什么因为真实世界里的影子并不是纯黑的它会受环境光影响颜色和物体底部地面的颜色有微弱关系。rgba能模拟这种“半透明的空气感”。如果你用纯黑透明度 1阴影会像张贴纸一样生硬。具体到取色的时候给小白一个可以直接套的思路背景色越浅阴影透明度越低背景色越深透明度越高。浅灰背景上rgba(0,0,0,0.12)就能看出层次深蓝背景上可能需要rgba(0,0,0,0.35)才有存在感。另外彩色阴影也不是禁区设计师经常用和主题色同色系的深色做彩色阴影比如琥珀色按钮配rgba(219, 154, 4, 0.35)的阴影质感会明显提升。2.5 inset把影子翻进盒子里模拟“陷进去”的视觉inset的作用是把原本投射在元素外部的阴影翻转到元素内部。语法上放在整条阴影声明的末尾或开头都行浏览器解析结果一样但团队规范里一般固定在末尾方便统一阅读。box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);内阴影最常见的场景是模拟凹陷、凹槽、按钮按下去的物理状态。比如一个真实感较强的仪表盘外圈要用外阴影突出立体内部刻度凹槽要用内阴影制造下沉感。还有一个很经典的用法结合border-radius: 50%和内侧渐变做出类似手机 App 图标那种凹陷质感。3. 三个高频变体操作多重阴影、负扩散、内阴影叠加box-shadow真正产生质变的地方在于它能接受逗号分隔的多组值。这意味着同一元素身上可以同时挂多套阴影它们会按照先写的在上、后写的在下的规则叠放。这一小节聊三个实战价值极高的变体用法。3.1 多重阴影一个元素同时拥有“光晕、描边、投影”三份装饰box-shadow: 0 0 0 2px #f00, /* 红色描边紧贴元素 */ 0 4px 10px rgba(0,0,0,0.2), /* 常规投影 */ 0 0 30px rgba(255,0,0,0.1); /* 红色光晕 */三条阴影叠加后视觉层次非常丰富。但要提醒一句每多一条阴影浏览器名都多一次绘制计算这在低端移动设备上会造成肉眼可见的掉帧。实战里同一元素挂三条以上阴影的场景尽量收敛实在要挂优先考虑用::before、::after伪元素分拆把绘制压力分散到不同的层。3.2 spread 取负值用 0 偏移 0 模糊做“内收光边”/* 在元素内侧形成一圈 4px 的暗色收边 */ box-shadow: 0 0 0 -4px rgba(0, 0, 0, 0.5);这个写法很妙。偏移是0模糊是0只有扩散是负数于是阴影从四周向内收缩 4px形成一圈紧贴元素边缘的内侧阴影。对于卡片类组件右侧和下方都做外阴影、左上角做一点负扩散阴影可以营造出“边框下方有厚度”的立体感比单纯加border更细腻。还有个小技巧负扩散配合浅色能做“高光内框”。比如在深色背景上给按钮加一圈0 0 0 -2px rgba(255,255,255,0.6)的白色内缩阴影看起来就像按钮边缘被打了一圈光边非常提神。3.3 inset 配合 transition让按压反馈从“生硬”变“顺滑”前端做按钮交互时最常见的反馈方式是在:active状态加内阴影。但直接把box-shadow从外阴影切到内阴影中间没有过渡会显得很生硬。解决办法是先给元素一个常态的外阴影在:active里同时把inset阴影的透明度、扩散值调整一下.button { transition: box-shadow 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .button:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }因为transition监听的是box-shadow整体变化浏览器会尝试在两组值之间做插值。只要参数数量、位置相同过渡效果就是平滑的。这个细节很多新手不知道做完之后感觉“好像没那么跟手”原因就是少了这段transition。4. 从会写到会用四个能直接抄进项目的实用场景有了语法基础下面进入实战。我挑了几个前端项目里最常用的阴影场景每个都给出完整代码和设计思路。4.1 卡片悬浮阴影常态、悬浮态、深色主题三档卡片是box-shadow出现频率最高的组件。一套比较完整的卡片阴影命名建议拆成三个状态shadow-sm常态、shadow-md悬浮、shadow-lg强调。.card { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); } .card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.10), 0 12px 24px rgba(0,0,0,0.08); }这里为什么用两组阴影叠加第一组负责近处轮廓阴影小、清晰第二组负责远处氛围阴影大、模糊组合起来更接近真实光线下的多层次投影。深色主题下把黑阴影换成带有主品牌色的深色阴影透明度整体调低一档防止黑乎乎一片。4.2 按钮按压反馈与涟漪光圈扩散除了内阴影按压现在很多后台管理系统喜欢用“光圈扩散”这种带呼吸感的按钮反馈效果。做法是给按钮挂一个初始透明度为 0 的光晕阴影在点击时通过动画把它扩散出去。.btn { position: relative; box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); animation: ripple 1.2s infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(64, 158, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0); } }这个效果的关键是动画过程中把spread从0逐渐放大到12px同时把颜色的透明度从0.4降到0。从视觉上看就像一个涟漪从按钮边缘向外扩散然后消失。需要提醒的是这种动画会持续触发绘制按钮数量多、动画时长长的场景慎用否则 CPU 占用会明显升高。4.3 双层光晕实现“呼吸灯”提示效果给重要操作按钮比如下载、提交加呼吸灯通常需要两种颜色光晕交替比纯白色呼吸更有存在感。.glow { animation: breathe 2s ease-in-out infinite; } keyframes breathe { 0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 180, 50, 0.5); } 50% { box-shadow: 0 0 20px 6px rgba(255, 180, 50, 0.8); } }这里的光晕层次来自blur和spread同时增大大到一定程度后颜色开始发核心亮光。注意如果元素本身是圆角矩形光晕也会跟着圆角形状扩散不会出现生硬的方块光边。4.4 拟物按钮用外阴影 内阴影还原 iOS 立体感拟物设计虽然不如扁平风流行但在设置页开关、播放器控制键里仍有很强存在感。做这种效果外阴影负责“抬起来”内阴影负责“边缘压下去”。.ios-btn { background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), /* 右下投下的硬影 */ -6px -6px 12px rgba(255, 255, 255, 0.9), /* 左上高光 */ inset -2px -2px 4px rgba(255, 255, 255, 0.5), inset 2px 2px 4px rgba(0, 0, 0, 0.1); }这种四段阴影叠加的写法我强烈建议新手都手敲一遍。敲完之后你会发现所谓“高级阴影”不过就是把偏移方向、正负扩散、内外翻转这几个参数组合出了变化而已。5. 性能、兼容性与调试技巧这些坑我基本都踩过光会写样式不算真本事线上出问题还能快速定位才是。这一节讲box-shadow在真实项目里的几个隐藏坑。5.1 大面积模糊阴影千万不要做连续动画box-shadow属于绘制属性它不像transform和opacity那样可以走 GPU 合成。虽然现代浏览器对静态阴影已经做了大量优化但一旦用 JavaScript 每帧修改blur或spread就会触发大量的重绘。我在移动端项目里实测过一个全屏白色弹窗阴影blur: 60px且跟随手势移动帧率能直接从 60fps 掉到 20fps 左右。解决方案是分层处理阴影层固定在底层需要做动画的元素本体从阴影层里分离出来各自独立避免大量区域的重绘。5.2 兼容性速查哪些写法和浏览器会闹脾气基础box-shadow语法从 IE9 开始就支持了但高级用法有差别。旧版火狐需要-moz-前缀旧版 Safari/Chrome 需要-webkit-前缀。现在的主流浏览器Chrome 90Firefox 84Safari 14已经可以不加前缀直接使用。真正容易中招的是这几个边缘场景当同时使用border-radius和box-shadow时阴影默认跟随圆角弧度但早期 Safari 对“圆角矩形 大模糊阴影”组合处理有 bug会出现阴影直角。inset阴影在部分浏览器的打印样式media print下会莫名消失需要额外用border兜底。带透明度的颜色写成rgba兼容性最好不要用十六进制后拼字母透明度例如#ff000080旧版浏览器解析不了。5.3 用 DevTools 实时调试比反复刷新快十倍Chrome DevTools 的 Styles 面板里box-shadow那一行左侧有个小方块图标点击后可以直接鼠标拖拽阴影方向和模糊值。更实用的一个技巧是直接在 Elements 面板里选中元素然后在控制台里输入$0.style.boxShadow 0 0 30px 2px gold改完即所见不用刷新页面。如果项目里阴影比较多建议统一抽成 CSS 变量在根节点一次调整比如:root { --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); }这样后续要改全局阴影风格只要在:root里改一处即可。5.4 filter: drop-shadow() 和 box-shadow 的区别面试里经常被问到日常开发也容易混淆。两种阴影的核心差异在于作用对象box-shadow作用于元素的盒模型边框它严格遵守元素的矩形轮廓哪怕是圆角矩形也只是四个角变圆。filter: drop-shadow()作用于元素的渲染结果它能把经过clip-path裁剪、PNG 透明图、带::before伪元素的形状都识别出来并打上阴影。简单说如果你有一个不规则图形想让阴影完全贴合形状轮廓只能用drop-shadow。代价是它的性能比box-shadow差且不支持inset、不支持多重阴影叠加。所以常规矩形卡片、按钮用box-shadow图标、异形图用drop-shadow。6. 面试和团队规范里关于 box-shadow 的那些“隐性考点”最后这部分写给准备面试或正在带团队的朋友。box-shadow在面试题里出现频率不低但考察方式往往不是让你背参数而是看你能不能把它的特性用在实际问题里。6.1 高频题如何实现一个 1px 的细描边而不占用布局空间常规思路是用border: 1px solid #ccc但如果这个元素是要做悬浮改变描边颜色的用border会导致布局抖动因为边框占据空间。标准答案是用box-shadow: 0 0 0 1px #ccc这样描边不占空间视觉上与边框无异并且如果要改颜色只要在相同位置替换box-shadow即可。如果想让描边带圆角只要元素本身设置了border-radius阴影就会自动跟随。但注意这个做法有缺陷box-shadow是绘制在元素外部的它不会触发鼠标事件响应区域。如果你需要这个 1px 描边区域也能点击还是得用真正的边框或outline。面试时能说出这个差异会让面试官觉得你有实战经验。6.2 团队规范里box-shadow 该怎么统一管理我在带团队时定过三条规范效果不错分享出来供参考所有阴影值封装为 CSS 变量不允许在业务代码里直接写0 0 10px #eee这种魔法值。同一套 UI 体系只保留 3~4 档阴影变量--shadow-sm、--shadow-md、--shadow-lg传递层级关系而不是随意发挥。强调色不要用纯黑阴影必须使用rgba并控制透明度保证在深色背景上不会发灰。这三条本质上是让阴影服务于设计系统的一致性而不是每个组件各自为政。设计交付后前端只要对照变量替换即可整个页面的阴影层级会非常干净。6.3 一个冷知识box-shadow 不会触发 layout但会触发 paint很多前端对性能有误解以为“属性变化只要不走 layout 就没事”。box-shadow确实不会改变元素几何尺寸所以不会触发重排但你每次修改它浏览器都需要重新绘制受影响的区域。对于大面积区域频繁改阴影的动效依然会卡。理解这个区别在排查卡顿时就不会只盯着transform和width了。写到这里我想起最开始学box-shadow时自己也栽过不少跟头有段时间特别迷信复杂阴影什么按钮都套个五层阴影结果移动端一渲染直接掉帧后来明白了一个道理阴影本质上是为了表达元素与背景之间的“距离感”距离越大阴影越柔和、越扩散距离越小阴影越清晰、越紧凑。你只要抓住了这个核心写出来的阴影即使参数复杂也不会让人觉得“脏”。如果读这篇的你正在为阴影效果发愁不用急先把六个参数在 DevTools 里各调一遍再把今天这几个场景手敲一遍回头再看设计稿上的阴影基本就能一眼反推参数了。
