使用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為網頁增加陰影效果的一些方法。可以根據需要選擇適合的方法來為網頁增加陰影效果。