在CSS中，
box-shadow
属性为开发者提供了丰富的阴影效果，其中
spread-radius
（阴影扩展半径）是一个重要的参数，它能够显著改变阴影的视觉效果。本文将详细讲解阴影扩展半径的概念、用法以及如何通过实例来理解和应用这一技巧。
阴影扩展半径的概念
spread-radius
用于控制阴影的扩散程度。当
spread-radius
的值大于0时，阴影会向四周扩散；当值小于0时，阴影会向内收缩。默认值为0，表示没有扩散或收缩。
阴影扩展半径的语法
box-shadow
属性的语法如下：
box-shadow: h-offset v-offset blur-radius spread-radius color [inset];
其中，
spread-radius
是第五个参数，用于定义阴影的扩展半径。
阴影扩展半径的用法
扩散阴影
假设我们有一个元素，我们想要给它添加一个向四周扩散的阴影效果：
扩散阴影 {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
在这个例子中，
spread-radius
设置为5，这意味着阴影将会从元素的原位置向外扩散5像素。
收缩阴影
如果我们想让阴影向内收缩，可以将
spread-radius
设置为负值：
收缩阴影 {
box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
}
在这个例子中，
spread-radius
为-5，阴影将会向内收缩5像素。
实例分析
以下是一个使用阴影扩展半径的完整示例：
在这个例子中，我们创建了两个盒子，分别应用了扩散和收缩的阴影效果。你可以通过调整
spread-radius
的值来观察阴影的变化。
总结
阴影扩展半径是
box-shadow
属性中的一个强大工具，它能够让你创建出各种不同的阴影效果。通过理解其概念和语法，结合实际案例进行实践，你可以轻松地掌握这一技巧，并在你的网页设计中发挥出更多的创意。