盒子阴影是CSS技术中常用的一种效果，可以为盒子添加立体感和阴影，使页面的视觉效果更加生动。通过CSS的box-shadow属性，可以实现盒子阴影效果。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：水平偏移距离，可以是正数、负数或0，正数表示向右偏移，负数表示向左偏移。
• v-shadow：垂直偏移距离，可以是正数、负数或0，正数表示向下偏移，负数表示向上偏移。
• blur：模糊距离，可以是正数、负数或0，数值越大，阴影越模糊，但不会改变阴影的大小，如果值为0，则阴影边缘非常清晰。
• spread：阴影扩张距离，可以是正数、负数或0，正数表示扩张，负数表示收缩，如果值为0，则阴影的大小不会改变。
• color：阴影颜色，可以是颜色值、预定义颜色名称或RGB值等。
• inset：可选值，如果设置则表示阴影内侧。

示例

.shadow {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

上述代码表示为一个类名为shadow的盒子添加一个向右下方偏移4像素和阴影扩展范围为8像素的黑色半透明阴影，效果如下：

总结

盒子阴影作为一种常用的CSS样式效果，同时也是前端开发中比较基础的内容之一，可以大大提升页面的美观程度。使用CSS的box-shadow属性简单方便，只需要熟悉其语法并了解各参数的作用即可实现不同的效果。