CSS3光圈阴影是CSS3中很有趣的一个特性，它可以给元素添加出光圈的效果，让页面的表现更加生动、丰富。 CSS3光圈阴影深受前端开发人员的喜爱，下面我们一起来学习一下怎样使用CSS3光圈阴影。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.5);
}

上面的代码是CSS3光圈阴影最基本的写法，它使用box-shadow属性。其中第一个参数是水平偏移量，第二个是垂直偏移量，第三个是模糊半径，第四个是扩散半径，第五个是阴影颜色与透明度。比如上面的代码将生成一个水平偏移量和垂直偏移量都为0的阴影，模糊半径为20px，扩散半径为5px，颜色为红色，透明度为0.5的光圈阴影。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.5), 
0 0 20px 10px rgba(255, 0, 0, 0.3),
0 0 20px 15px rgba(255, 0, 0, 0.1);
}

上面的代码是如何生成多个光圈阴影的示例，使用逗号将不同阴影的参数隔开。同样，我们可以使用多个光圈阴影，产生不同的效果。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: inset 0 0 20px 5px rgba(255, 0, 0, 0.5);
}

CSS3光圈阴影还支持内阴影，我们可以通过将inset关键字加在前面，来设置内阴影。可以看到，上面的例子与之前最基本的写法非常类似，只不过多了一个关键字。

CSS3光圈阴影的内容还不止这些，以上是最基础、最简单的应用。我们可以结合其他CSS特性，将光圈阴影的效果发挥到更大空间。