在CSS中给整个div添加阴影效果 - box-shadow

box-shadow属性可以在CSS中为元素添加一个阴影效果。实现此效果需要几个步骤：

第一步：选定要添加阴影效果的div

在HTML文档中，使用<div>元素创建一个矩形区域，在CSS中对其进行样式设置。

<div class="box"></div>

.box {
    width: 300px;
    height: 200px;
    background-color: #ffffff;
}

第二步：使用box-shadow属性实现阴影效果

box-shadow属性用于为元素添加阴影，具体的语法如下：

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

其中，每个属性值的含义如下：

| 属性值 | 描述 | | ----------- | ------------------------------------------------------------ | | h-shadow | 必需。指定水平阴影的位置，正值为向右，负值为向左。 | | v-shadow | 必需。指定垂直阴影的位置，正值为向下，负值为向上。 | | blur | 可选。指定模糊半径的大小。 | | spread | 可选。指定阴影的扩散半径的大小。 | | color | 可选。指定阴影的颜色。可以使用命名颜色、RGB值、十六进制值等方式指定。 | | inset | 可选。指定阴影是否为内阴影。如果指定该属性值，表示是内阴影；否则表示是外阴影。 |

下面的代码演示如何在一个<div>元素上添加一个外阴影和一个内阴影：

.box {
    width: 300px;
    height: 200px;
    background-color: #ffffff;
    /* 外阴影 */
    box-shadow: 10px 10px 5px #888888;
    /* 内阴影 */
    box-shadow: inset 0 0 5px #000000;
}

以上代码会产生两个阴影效果：一个是向右下方偏移10像素、向右下方扩散5像素大小、颜色为#888888的外阴影；另一个是一个5像素大小的内阴影，颜色为#000000。

第三步：调整阴影效果

box-shadow属性提供多个属性值的组合，可以很方便地实现多种阴影效果。各属性值的组合也可以用来调整阴影的位置、大小、颜色等。

例如，下面的代码实现了四个外阴影和一个内阴影：

.box {
    width: 300px;
    height: 200px;
    background-color: #ffffff;
    /* 外阴影1：向右下方偏移10像素，向右下方扩散5像素大小，颜色为#888888 */
    /* 外阴影2：向左上方偏移10像素，向左上方扩散5像素大小，颜色为#888888 */
    /* 外阴影3：向左下方偏移10像素，向左下方扩散5像素大小，颜色为#888888 */
    /* 外阴影4：向右上方偏移10像素，向右上方扩散5像素大小，颜色为#888888 */
    box-shadow: 
        10px 10px 5px #888888,
        -10px -10px 5px #888888,
        -10px 10px 5px #888888,
        10px -10px 5px #888888,
        /* 内阴影：向元素内部偏移3像素，颜色为#000000 */
        inset 0 0 3px #000000;
}

在某些浏览器中，box-shadow属性可能需要前缀才能正常工作。例如，在WebKit浏览器中，需要添加前缀-webkit-，代码如下所示：

.box {
    width: 300px;
    height: 200px;
    background-color: #ffffff;
    -webkit-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
}

总结

使用box-shadow属性可以很方便地为元素添加阴影效果。通过调整各属性值的组合，可以实现多种阴影效果。在使用该属性时，需要注意不同浏览器的兼容性问题，可能需要添加相应的前缀才能正常工作。