1. 前言

在网页设计中，图像的应用越来越广泛，而一些特效的运用也让网页更加美观。其中，阴影效果被广为采用，给网页带来了立体感和深度感。在CSS中，设置图片阴影并不复杂，只需要掌握一些基本的原理和技巧就可以轻松实现。

2. box-shadow属性

在CSS中设置图片阴影，最常用的属性是box-shadow。这个属性可以用于任何HTML元素，可以为这些元素添加一个或多个阴影。下面是box-shadow属性的语法:

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

各个参数的含义如下：

h-shadow: 必需。水平阴影的位置。正值表示右移，负值表示左移。

v-shadow: 必需。垂直阴影的位置。正值表示下移，负值表示上移。

blur: 可选。模糊半径。值越大，阴影越模糊，通常不必设置。

spread: 可选。阴影的大小。正值表示扩大，负值表示缩小，默认为0。

color: 可选。阴影的颜色。默认为黑色。可以使用十六进制、RGB、RGBA等颜色表示方式。

inset: 可选。将阴影改为内阴影。

2.1 示例

下面是一个简单的示例，演示如何为一个图片添加阴影效果：

img {

    box-shadow: 5px 5px 5px #888888;
}

这个示例中，我们为img元素添加了一个阴影，水平位置为5px，垂直位置也为5px，大小为5px，颜色为#888888。

效果如下：

3. text-shadow属性

text-shadow属性用于为文本添加阴影效果，也可以用于图片或其他元素。它的语法与box-shadow类似，但只需设置两个参数：水平位置和垂直位置。下面是text-shadow属性的语法：

text-shadow: h-shadow v-shadow blur color;

其中，水平位置和垂直位置的值可以为正负数，表示阴影的位置。blur和color的值与box-shadow属性一样。

3.1 示例

下面是一个示例，演示如何为一段文本添加阴影效果：

h1 {

    text-shadow: 2px 2px 2px #333;
}

这个示例中，我们为h1元素添加了一个阴影，水平位置为2px，垂直位置也为2px，大小为2px，颜色为#333。效果如下：

文本阴影效果示例

4. CSS Sprites

CSS Sprites是一种技术，可以将页面上用到的多个小图片合成一张大图片，从而减少页面的请求数量，提升页面加载速度。在使用CSS Sprites时，需要设置background-position属性，使图片正确显示。下面是background-position属性的语法：

background-position: x-position y-position;

x-position和y-position的取值可以为百分比或像素值，分别表示背景图片在水平和垂直方向上的位置。

4.1 示例

下面是一个示例，演示如何使用CSS Sprites为一个链接添加阴影效果：

a {

    background: url(sprite.jpg) no-repeat;
}
a:hover {
    background-position: -100px -50px;
    box-shadow: 5px 5px 5px #888888;
}

这个示例中，我们为链接添加了一个背景图片sprite.jpg，当鼠标移动到链接上方时，背景图片的位置发生改变，同时为链接添加一个阴影效果。效果如下：