CSS的box-shadow 用法

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（内阴影）: 可选关键字，如果使用，阴影将从外部转为内部阴影。

示例

1. 基本阴影：

div {
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
}

这将在元素的右下方添加一个简单的阴影。

2. 多重阴影：

div {
    box-shadow: 
        3px 3px 5px rgba(0, 0, 0, 0.2),
        -1px -1px 10px rgba(0, 0, 0, 0.1);
}

这将在元素上添加两个阴影，一个向右下方投影，另一个向左上方投影。

3. 内部阴影：

div {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

这将在元素内部边缘添加一个阴影，常用于模拟内凹效果。

4. 颜色与扩散：

div {
    box-shadow: 0 0 8px 3px #f00;
}

这将在元素周围添加一个模糊且有明显扩散效果的红色阴影。

实践提示

• 阴影可以让元素视觉上更有层次感，但使用过多可能导致页面看起来杂乱。
• 在移动设备上，过度使用阴影可能影响渲染性能。
• 使用半透明颜色（如RGBA）可以创建更自然的阴影效果。

通过调整这些参数，你可以实现各种视觉效果，使网页设计更具吸引力和深度。