" box-shadow" CSS属性可以在HTML元素下方添加阴影，使其看起来像在页面中其他HTML元素上方，类似于3D。

" box-shadow" CSS属性具有5个参数。格式如下：

box-shadow : inset  offsetX  offsetY  blurRadius spreadRadius shadowColor

inset关键字是可选的。如果将其放入，则将在HTML元素内绘制框阴影，从而使HTML元素看起来像是被压入屏幕了，而不是从屏幕上抬起。

" offsetX"和" offsetY"参数指定要从HTML元素"伸出"阴影的数量。 " offsetX"参数指定沿X轴的距离，" offsetY"指定沿Y轴的距离。我们可以使用正数和负数来控制阴影的显示位置。

blurRadius指定要模糊多少阴影。模糊半径越大，框阴影将越模糊。

spreadRadius指定阴影应扩散多少。我们可以同时使用正向和负向展开半径。负传播半径将限制阴影仅在HTML元素的边缘之一下方突出。

" shadowColor"指定阴影的颜色。这只是使用标准CSS语法指定的标准CSS颜色。请注意，模糊半径也会通过模糊框阴影颜色来影响真实颜色。

这是一个CSS box shadow示例：

<div style="box-shadow: 5px 5px 6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow
</div>

这是一个div元素，其中应用了上面的框阴影样式：

一个带有CSS框阴影的框。

这是一个示例，其散布半径为负数(-6px)，而其offsetX为0：

<div style="box-shadow: 0px 8px 6px -6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow with negative spread radius.
</div>

一个带有CSS阴影的盒子，其散布半径为负。框影

这是一个添加了inset关键字的示例。请注意，现在如何在HTML元素顶部的HTML元素内绘制框阴影，使它看起来像已被压入页面。

<div style="box-shadow: inset 6px 6px 6px -6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow using inset
</div>