在网页设计中，给图片添加阴影效果是一种常见的视觉增强手段，可以使元素看起来更立体，更具深度感。在本文中，我们将深入探讨如何使用`DIV`和`CSS`为图片添加阴影，以及`CSS3`的新特性如何使得这个过程变得更加简便和高效。
让我们回顾一下在`CSS2`时代如何通过`DIV`来实现阴影效果。在没有`CSS3`的年代，我们通常会创建一个额外的`div`元素作为图片的遮罩，然后通过设置边框和背景颜色来模拟阴影。例如：
```html
<div class="shadow">
<img src="11.jpg" alt="图片示例">
</div>
```
```css
.shadow {
position: relative;
width: 200px; /* 图片宽度 */
height: 200px; /* 图片高度 */
padding: 5px;
border: 5px solid #ccc;
background: #fff;
}
```
然而，这种方法存在局限性，如阴影形状单一，调整难度大，无法实现动态阴影等。
进入`CSS3`时代，我们有了`box-shadow`属性，这极大地简化了为图片添加阴影的过程。`box-shadow`可以设置水平偏移量、垂直偏移量、模糊半径、阴影扩展半径以及阴影颜色。例如，为图片添加一个简单的内阴影：
```css
img {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}
```
这里的参数解释如下：
- `inset`：表示内阴影，省略则默认为外阴影。
- `2px 2px`：阴影的水平和垂直偏移量，正数向右下，负数向左上。
- `5px`：模糊半径，数值越大，阴影边缘越模糊。
- `rgba(0, 0, 0, 0.3)`：阴影颜色，`rgba`表示带有透明度的颜色，`0.3`是透明度值，范围0-1。
为了兼容旧版浏览器，如IE8，我们可以使用`ie-css3.htc`文件来实现`box-shadow`的渐进增强。这是一种行为（behaviors）技术，将CSS3属性转化为JavaScript实现。在`test.html`或`CSS3.htm`中，你需要引入这个`.htc`文件，并为不支持`box-shadow`的浏览器添加特定的样式：
```html
<!--[if lt IE 9]>
<style>
img {
behavior: url(/path/to/ie-css3.htc);
/* 在这里添加其他CSS3样式，如box-shadow */
}
</style>
<![endif]-->
```
在`CSS3_files`文件夹中，可能包含了一些用于演示`CSS3`阴影效果的额外样式和资源。确保在实际项目中正确引用这些文件，以便于代码的组织和维护。
通过`CSS3`的`box-shadow`属性，我们可以轻松地为图片添加各种复杂的阴影效果，而无需像过去那样使用额外的`div`或复杂的背景技巧。同时，借助于`ie-css3.htc`这样的行为文件，我们还能确保在老版本的IE浏览器中获得良好的兼容性。在实际应用中，设计师和开发者可以根据需求灵活调整阴影参数，创造出丰富多样的视觉体验。
