1. 简介
CSS能够给图片添加投影效果，使得图片更有层次感和立体感。投影效果能够让一张原本平面的图片更加生动，给用户留下深刻的印象。在本文中，将介绍如何使用CSS添加投影效果。
2. box-shadow属性
2.1 属性介绍
要给图片添加投影效果，主要使用的是CSS的box-shadow属性。该属性可以在元素周围创建一个盒子阴影效果，让元素看起来更加立体、有深度感。box-shadow属性的基本语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;其中，各参数的含义如下：
h-shadow: 水平偏移量。可正可负。
v-shadow: 垂直偏移量。可正可负。
blur: 模糊半径。默认为0。值越大，阴影越模糊。
spread: 阴影的扩散半径。默认为0。值越大，阴影越扩散。
color: 阴影颜色。默认是元素本身的文本颜色。可以使用十六进制、RGB等颜色值。
inset: 可选。设置为inset表示内阴影，否则表示外阴影。默认为外阴影。
2.2 例子演示
下面是一个简单的例子，演示如何在图片上添加投影效果。
img {
box-shadow: 5px 5px 10px #888888;
}
效果如下:
在上述例子中，我们给图片添加了一个5px水平方向偏移和5px垂直方向偏移的阴影，模糊半径为10px，颜色为#888888。
3. 控制阴影方向和大小
3.1 控制阴影方向
通过调整box-shadow属性中的h-shadow和v-shadow参数，可以控制阴影的方向。如果将这两个参数设置为负数，那么阴影就会向相反的方向偏移。下面是一些例子：
/* 向右下方偏移 */
box-shadow: 5px 5px 10px #888888;
/* 向左上方偏移 */
box-shadow: -5px -5px 10px #888888;
/* 没有水平偏移 */
box-shadow: 0 5px 10px #888888;
3.2 控制阴影大小
通过调整box-shadow属性中的blur和spread参数，可以控制阴影的大小。如果将这两个参数设置为0，那么阴影的效果就会消失。
/* 扩散半径为5 */
box-shadow: 5px 5px 10px 5px #888888;
/* 模糊半径为0 */
box-shadow: 5px 5px 0 5px #888888;
4. 添加多重投影效果
在CSS3中，可以通过使用逗号分隔的多个box-shadow属性来创建多重投影效果，下面是一个例子：
/* 阴影1: 向右下方偏移 */
/* 阴影2: 向左上方偏移 */
img {
box-shadow: 5px 5px 5px #888888,
-5px -5px 5px #888888;
}
效果如下：
5. 使用伪元素创建阴影效果
除了在元素本身添加投影效果，还可以通过使用伪元素::before和::after来创建阴影效果，这样不会影响到元素本身的样式。下面是一个例子：
/* 创建一个向右下方偏移的阴影 */
.box::before {
content: '';
position: absolute;
z-index: -1; /* 将伪元素放置到元素下面 */
top: 5px; /* 和元素上方保持一定的距离 */
left: 5px; /* 和元素左侧保持一定的距离 */
width: 100%;
height: 100%;
box-shadow: 5px 5px 10px #888888;
}
在上述例子中，我们创建了一个伪元素::before，并通过设置z-index属性将其放在元素下面，top和left属性维持一定的距离。最后，使用box-shadow属性来给伪元素添加向右下方偏移的阴影效果。
6. 总结
在本文中，我们学习了如何使用CSS的box-shadow属性给图片添加投影效果。box-shadow属性可以控制阴影的方向、大小和颜色。我们还学习了如何使用逗号分隔的多个box-shadow属性来创建多重投影效果，并且介绍了如何使用伪元素来创建阴影效果。通过细节的调整，能够让投影效果更加真实、生动。