CSS中盒子阴影(box-shadow)属性的使用方法详解

box-shadow:h-offsetv-offsetblurspreadcolorinset;

在这个示例中，我们创建了一个宽度和高度均为200px的白色盒子，并为其添加了一个阴影效果。阴影的水平偏移量为10px，垂直偏移量为10px，模糊距离为20px，颜色为半透明的黑色。

三、多个阴影效果

box-shadow属性允许多个阴影效果，只需要用逗号分隔即可。例如：

.shadow{
box-shadow:10px10px20pxrgba(0,0,0,0.5),
-10px-10px20pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了两个阴影效果，一个向右下角偏移，另一个向左上角偏移。

四、内阴影效果

通过添加inset关键字，可以实现内阴影效果。例如：

.shadow{
box-shadow:inset10px10px20pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了一个内阴影效果，阴影向右下角偏移。

五、扩展和收缩阴影

通过设置spread参数，可以实现阴影的扩展和收缩。例如：

.shadow{
box-shadow:10px10px20px10pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了一个扩展的阴影效果，阴影向外扩展了10px。

六、不同方向的阴影

通过设置不同的h-offset和v-offset参数，可以实现不同方向的阴影效果。例如：

.shadow{
box-shadow:10px10px20pxrgba(0,0,0,0.5),
-10px10px20pxrgba(0,0,0,0.5),
10px-10px20pxrgba(0,0,0,0.5),
-10px-10px20pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了四个不同方向的阴影效果。

七、不同颜色的阴影

通过设置不同的color参数，可以实现不同颜色的阴影效果。例如：

.shadow{
box-shadow:10px10px20pxred,
-10px10px20pxgreen,
10px-10px20pxblue,
-10px-10px20pxyellow;
}

在这个示例中，我们为盒子添加了四个不同颜色的阴影效果。

八、不同模糊程度的阴影

通过设置不同的blur参数，可以实现不同模糊程度的阴影效果。例如：

.shadow{
box-shadow:10px10px10pxrgba(0,0,0,0.5),
10px10px20pxrgba(0,0,0,0.5),
10px10px30pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了三个不同模糊程度的阴影效果。

九、不同扩展程度的阴影

通过设置不同的spread参数，可以实现不同扩展程度的阴影效果。例如：

.shadow{
box-shadow:10px10px20px5pxrgba(0,0,0,0.5),
10px10px20px10pxrgba(0,0,0,0.5),
10px10px20px15pxrgba(0,0,0,0.5);
}

在这个示例中，我们为盒子添加了三个不同扩展程度的阴影效果。

十、综合示例

下面是一个综合示例，展示了如何结合使用box-shadow属性的各个参数：