HTML元素上的方框阴影在大多数浏览器中得到广泛支持已经有一段时间了，但我发现默认选项通常不允许对阴影进行太多的视觉操作。
在上面的示例中，第一个属性编号是x轴的原点，第二个数字是y轴的原点，第三个是模糊量。
对于我们的示例，我们还应该添加一些最小的样式来清理一下.box容器：
.box-tainer{box-shadow：0 4px 8px RGBA(0，0，0，0.3)；/*使其不那么难看的样式*/背景：白色；边框半径：10px；边框：1px实体#eee；高度：200px；填充：10px；位置：相对；宽度：250px；}。
我们只需要在要应用阴影的主元素中添加一个简单的子div(或者如果您愿意，也可以使用伪元素)：
现在，我们将内部的子元素设为绝对元素，并将其高度和宽度动态设置为略小于其父元素的高度和宽度(百分比对此效果最好)。请记住通过添加z-index：-1将此子元素设置在其父元素之后。
.box-容器{/*此元素不再需要长方体阴影*//*样式使其不那么难看*/背景：白色；边框半径：10px；边框：1px实体#eee；高度：200px；填充：10px；位置：相对；宽度：250px；}.box-容器-内部{Bottom：0；/*现在这里添加了长方体阴影*/box-shape：04px 12px RGBA(0，0，0，
我们现在可以停下来，拥有一个看起来更舒服的投射阴影--但是我们可以使用一个额外的属性-滤镜：blur()；来做得更好。
.box-容器{/*样式使其不那么难看*/背景：白色；边框-半径：10px；边框：1px实体#eee；高度：200px；填充：10px；位置：相对；宽度：250px；}.box-容器-内部{底部：0；框-阴影：04px 12px RGBA(0，0，0，0.3)；滤镜：模糊(6px)；高度：94%；左侧：3%；位置：
这将渲染为更平滑的投影混合，从而创建更逼真的深度错觉：