使用CSS为网页增加阴影效果

一、设置文本阴影

使用CSS的text-shadow属性可以为文字添加阴影效果。text-shadow属性有三个值，分别是水平偏移量、垂直偏移量和模糊半径。下面是一个例子：

p {
    text-shadow: 1px 1px 2px #000;
}

上面的代码表示为p元素设置阴影，阴影偏移量为1px和1px，模糊半径为2px，颜色为黑色。

二、设置盒子阴影

使用CSS的box-shadow属性可以为元素添加盒子阴影效果。box-shadow属性也有三个值，分别是水平偏移量、垂直偏移量和模糊半径，还有一个可选的第四个值，表示阴影的扩张半径。下面是一个例子：

div {
    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);
}

上面的代码表示为div元素设置盒子阴影，阴影偏移量为2px和2px，模糊半径为4px，扩张半径为2px，颜色为黑色且透明度为0.3。

三、设置按钮阴影

使用CSS的伪元素和box-shadow属性可以为按钮添加阴影效果。以下是一个例子：

button {
    position: relative;
    background-color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
}

button::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

上面的代码表示为button元素设置伪元素::before，使其位于按钮下面，表示按钮的下方有阴影效果。使用线性渐变设置阴影的颜色，box-shadow属性设置阴影效果。

四、设置图片阴影

使用CSS的filter属性可以为元素添加滤镜效果，其中包括阴影效果。以下是一个例子：

img {
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

上面的代码表示为img元素添加阴影效果，阴影偏移量为2px和2px，模糊半径为4px，颜色为黑色且透明度为0.5。

五、结语

以上是使用CSS为网页增加阴影效果的一些方法。可以根据需要选择适合的方法来为网页增加阴影效果。