CSS box-shadow多色阴影设置方法

CSS 的 `box-shadow` 虽然不支持直接为上、右、下、左四边分别指定颜色，但可通过逗号分隔的多组阴影巧妙模拟出四边异色效果——关键在于精准控制每组阴影的偏移方向（如 `0 -2px` 向上、`2px 0` 向右）、模糊度与**负 spread-radius（如 `-2px`）**，后者能有效收紧阴影边缘、避免颜色混叠和角落溢出，使红、蓝、绿、黄四色边界清晰锐利；该方案兼容所有现代浏览器，是兼顾视觉精度与实用性的 CSS 技巧。

box-shadow 能不能给四边分别设不同颜色？

不能直接实现「上边红色、右边蓝色」这种按边指定颜色的效果。CSS 的 box-shadow 本身不支持「单侧阴影颜色控制」，所谓“四周独立颜色”，本质是靠多个阴影叠加模拟出来的视觉效果。

用逗号分隔多组 shadow 实现四边异色的关键写法

真正起作用的是把四段方向明确、偏移和模糊都控制得当的阴影用逗号连起来。每组必须包含完整的 offset-x offset-y blur-radius spread-radius color，缺一不可，否则整条声明会失效。

• 上边阴影：0 -2px 4px -2px #f00（负 offset-y 向上，spread-radius 为负可收紧边缘）
• 右边阴影：2px 0 4px -2px #00f（正 offset-x 向右）
• 下边阴影：0 2px 4px -2px #0f0
• 左边阴影：-2px 0 4px -2px #ff0

合起来就是：box-shadow: 0 -2px 4px -2px #f00, 2px 0 4px -2px #00f, 0 2px 4px -2px #0f0, -2px 0 4px -2px #ff0;

为什么 spread-radius 用负值？

默认正 spread 会让阴影向外均匀扩张，导致相邻两色交界处混色、发虚，看不出清晰边界。负 spread-radius 相当于把阴影向内收缩，让每条“边影”更贴合盒模型边缘，减少重叠干扰，颜色才够干净利落。

• 不用负值时，四条阴影在四个角大量重叠，颜色变灰、边界模糊
• spread-radius 绝对值通常取和 blur-radius 接近或略小（比如都用 4px 和 -2px），太大会削弱单边识别度
• 如果盒子有圆角（border-radius），负 spread 还能避免阴影在角上“溢出”成奇怪形状

兼容性和性能要注意什么？

所有现代浏览器都支持多层 box-shadow，但老版本 Safari（spread-radius 渲染不稳定，可能出现断影或颜色丢失。如果必须兼容，可用 outline + clip-path 替代，但语义和交互行为完全不同。

• 超过 6–8 层阴影可能触发部分低端安卓 WebView 的渲染卡顿，尤其配合 transform 动画时
• 别把这当成 border 替代方案——box-shadow 不占布局空间，也不响应 pointer-events，点击穿透问题得额外处理
• 深色背景上用浅色阴影时，blur-radius 别设太大，否则边缘泛白明显，看起来像脏边

真正难的不是写出来，而是调参：偏移量要刚好压住边线，blur 和 spread 要互相制衡，不然四条影子一打架，颜色就全糊了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~