CSS的box-shadow属性是一个强大的工具，用于向框（盒子）元素添加阴影效果。它可以添加一个或多个阴影，并可以定制阴影的大小、模糊程度、颜色等。
基本语法
box-shadow的基本语法如下：
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color] [inset];
- horizontal offset（水平偏移）: 阴影距离元素左边的距离，正值向右偏，负值向左偏。
- vertical offset（垂直偏移）: 阴影距离元素顶部的距离，正值向下偏，负值向上偏。
- blur radius（模糊半径）: 阴影的模糊程度，值越大阴影越模糊。
- spread radius（扩散半径）: 阴影的扩展/收缩程度，正值使阴影扩大，负值使阴影收缩。
- color（颜色）: 定义阴影的颜色。
- inset（内阴影）: 可选关键字，如果使用，阴影将从外部转为内部阴影。
示例
- 基本阴影：
div {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
}
这将在元素的右下方添加一个简单的阴影。
- 多重阴影：
div {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.2),
-1px -1px 10px rgba(0, 0, 0, 0.1);
}
这将在元素上添加两个阴影，一个向右下方投影，另一个向左上方投影。
- 内部阴影：
div {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
这将在元素内部边缘添加一个阴影，常用于模拟内凹效果。
- 颜色与扩散：
div {
box-shadow: 0 0 8px 3px #f00;
}
这将在元素周围添加一个模糊且有明显扩散效果的红色阴影。
实践提示
- 阴影可以让元素视觉上更有层次感，但使用过多可能导致页面看起来杂乱。
- 在移动设备上，过度使用阴影可能影响渲染性能。
- 使用半透明颜色（如RGBA）可以创建更自然的阴影效果。
通过调整这些参数，你可以实现各种视觉效果，使网页设计更具吸引力和深度。
