box-shadow颜色默认继承文本色，可自定义十六进制、RGB、HSL或关键字颜色；推荐用RGBA/HSLA控制透明度，通过inset设内阴影，支持多层不同颜色叠加，适用于卡片、按钮、警示等场景提升视觉层次。
在CSS中，box-shadow 属性不仅可以为元素添加阴影，还能通过设置颜色来控制阴影的视觉效果。默认情况下，阴影颜色会继承文本颜色（color），但你可以自定义任意颜色，让设计更具层次感。
基本语法与颜色设置
box-shadow 的完整语法如下：
box-shadow: h-offset v-offset blur spread color inset;其中 color 是可选参数，放在最后（或倒数第二，如果有 inset）。如果不指定颜色，浏览器会使用当前元素的 color 值作为阴影颜色。
示例：
立即学习“前端免费学习笔记（深入）”；
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px blue; box-shadow: 2px 2px 5px #ff6b6b;使用不同颜色类型
你可以用任何有效的CSS颜色值来设定 box-shadow 的颜色：
- 十六进制：如 #333、#00aaff
- RGB/RGBA：rgba(0, 0, 0, 0.5) 可以控制透明度，常用于柔和阴影
- HSL/HSLA：hsla(240, 100%, 50%, 0.2)
- 颜色关键字：red、blue、transparent 等
推荐使用 RGBA 或 HSLA，便于调节阴影的透明度，避免颜色过重影响布局美观。
内阴影与多层阴影中的颜色控制
使用 inset 可创建内阴影，颜色设置方式相同：
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);你还可以添加多个阴影，每个都可以有独立颜色：
box-shadow: 0 2px 4px red, 0 4px 8px blue, 0 6px 12px green;多层阴影从前往后叠加，前面的阴影在上层，适合模拟复杂光照效果。
常见应用场景
合理使用阴影颜色可以提升用户体验：
- 卡片组件：浅灰色阴影（如 rgba(0,0,0,0.1)）营造轻盈浮起感
- 按钮悬停：加深阴影颜色增强点击反馈
- 错误提示框：红色阴影突出警示状态
- 深色模式：使用偏蓝或偏灰的暗色阴影，避免纯黑生硬
基本上就这些。掌握 box-shadow 的颜色设置，能让你更灵活地控制界面的立体感和视觉重点。不复杂但容易忽略细节，比如透明度和多层叠加顺序。
