用 CSS 阴影提升界面层次感

阴影效果是增强网页元素立体感和深度的核心设计手段。CSS 提供 box-shadow 和 text-shadow 两种阴影控制属性，通过合理参数配置可创造从微妙的视觉提示到强烈的层次分离效果。
一、核心属性解析
‌1、box-shadow
.box {
box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色];
}
‌水平/垂直偏移‌：控制光源方向（正值右/下，负值左/上）
模糊半径‌：数值越大边缘越柔和（0 值生成锐利阴影）
扩展半径‌：按比例放大/缩小阴影尺寸
inset 关键字‌：实现内阴影效果（如凹陷按钮）

2‌、text-shadow

.text {
text-shadow: [水平] [垂直] [模糊] [颜色];
}
适用于文字投影，支持多阴影叠加创造特殊效果。

二、实战应用示例

1、卡片悬浮效果
https://www.zhouyihui.com/paipan/liuyao/14585.html
.card {
transition: box-shadow 0.3s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,120,255,0.2);
}
通过过渡动画增强交互反馈，透明色值（rgba）控制阴影浓度。

2. 内阴影按钮（凹陷效果）
   .button {
   box-shadow:
   inset 0 2px 4px rgba(255,255,255,0.3), /* 顶部高光 /
   inset 0 -2px 4px rgba(0,0,0,0.2); / 底部阴影 */
   }
   按钮表面呈现凹陷质感，顶部边缘有白色微光，底部暗部阴影增强立体感，类似物理按钮按压状态

3、立体文字

h1 {
text-shadow:
1px 1px 0 #333,
2px 2px 0 #666,
3px 3px 0 #999;
}
多层渐进阴影模拟物理空间中的立体文字。

三、高级技巧

‌性能优化‌：避免大面积元素使用高模糊阴影

‌暗黑模式适配‌：使用 CSS 变量动态切换阴影颜色

‌形状适配‌：配合 border-radius 实现圆形阴影

‌多重阴影‌：逗号分隔多个阴影声明增强层次

.depth {
box-shadow:
0 2px 2px rgba(0,0,0,0.1),
0 4px 4px rgba(0,0,0,0.1),
0 8px 8px rgba(0,0,0,0.1);
}
四、调试建议

在浏览器开发者工具中实时调整阴影参数（Chrome DevTools 可视化编辑器）

使用 rgba() 颜色值控制阴影透明度

结合 filter: drop-shadow(); 处理不规则形状阴影

‌复制以上代码到本地编辑器，通过调整参数值观察阴影变化规律，可直观掌握阴影控制的效果。