CSS阴影通过box-shadow和text-shadow实现，颜色可自定义。box-shadow用于元素阴影，语法包含偏移、模糊、扩展、颜色及inset参数，如box-shadow: 5px 5px 8px red；text-shadow用于文字，语法为偏移、模糊和颜色，如text-shadow: 2px 2px 4px gold。两者均支持关键词、十六进制、rgb/rgba设置颜色，推荐使用rgba控制透明度，避免纯黑，结合主题色与模糊值提升真实感，多重阴影用逗号分隔，顺序渲染。
在CSS中，阴影效果常用于提升元素的视觉层次感。主要通过 box-shadow 和 text-shadow 两个属性实现。它们都支持自定义阴影颜色，方法灵活且兼容性良好。
box-shadow 设置元素阴影颜色
box-shadow 用于为块级或行内块元素添加外阴影或内阴影。其语法结构如下：
box-shadow: h-offset v-offset blur spread color inset;其中颜色值可放在参数的任意位置（通常放在最后），默认为黑色（rgba(0,0,0,0.5)）。你可以显式指定颜色来改变阴影色调。
示例：
立即学习“前端免费学习笔记（深入）”；
- box-shadow: 5px 5px 8px red; —— 红色外阴影
- box-shadow: 0 0 10px 2px rgba(0, 123, 255, 0.6); —— 蓝色半透明光晕效果
- box-shadow: inset 0 0 10px #2ecc71; —— 内阴影，绿色
注意：inset 表示内阴影，颜色仍可通过关键词、十六进制、rgb 或 rgba 指定。
text-shadow 添加文字阴影颜色
text-shadow 专用于文本，语法更简洁：
text-shadow: h-offset v-offset blur color;
颜色同样可选，若省略则使用当前字体颜色的某种默认表现（通常为黑色半透明）。
示例：
立即学习“前端免费学习笔记（深入）”；
- text-shadow: 2px 2px 4px gold; —— 金色发光效果
- text-shadow: 0 -1px 2px rgba(255, 255, 255, 0.8); —— 白色高光，模拟浮雕
- text-shadow: 1px 1px 1px #000, 2px 2px 4px rgba(255, 0, 0, 0.5); —— 多重阴影，增强立体感
多重阴影用逗号分隔，顺序渲染（前层在上）。
颜色值的使用技巧
无论是 box-shadow 还是 text-shadow，颜色建议使用以下方式提升效果：
- 用 rgba() 控制透明度，避免阴影过重
- 搭配主题色保持界面统一，比如品牌蓝、暖橙等
- 模糊值（blur）与颜色结合影响柔和度，大模糊+低饱和色更自然
- 避免纯黑阴影（#000），改用深灰（如 #333）更真实
基本上就这些。掌握颜色设置能让阴影更贴合设计需求，不突兀也不失细节。实际开发中多尝试组合参数，效果立竿见影。
