在网页设计中中插入图片是再平常不过的事情了，有时为了美观的需要，可以给图片加上阴影，让图片有一种特殊的效果，CSS可以为图片加上阴影吗？答案是肯定的，在本例中将给读者介绍在制作网页时为图片加阴影的方法。

【操作步骤】

第1步，启动Dreamweaver，新建文档，保存为index.html。

第2步，构建网页基本结构。页面的结构很简单，只有两个<div>标签，在每个<div>标签中都包含了一个<div>标签和一个<img>标签，分别定义了一左一右两幅图片。

<div class="pic">

<div class="left">

<img src="images/2.jpg" border=0 alt="pic" />

</div></div><div class="pic">

<div class="right">

<img src="images/1.jpg" border=0 alt="pic" />

</div></div>

此时的页面极其简单，只有两张图片，没有任何样式的设置。

第3步，定义图片的阴影。其实给图片加阴影的原理很简单，就是运用两个<div>块的相对位置偏移而实现，阴影的宽度和颜色深浅由用户决定，也就是CSS中的相对定位属性position:relative;。

.pic {    position: relative;    

background: #CCC;    

margin: 10px;    

margin-right: 50px;    

float: left;}

.pic div {    position: relative;    

border: 1px solid #333;    

background: #FFF;    

padding: 3px;}.right {    top: -6px;        /*阴影在右边时*/    

left: -6px;}

.left {    

top: -6px;       /*阴影在左边时*/    

right: -6px;

给外层的<div>定义一个类样式为pic，设置其position属性为relative，也就是相对定位。设置它的背景色为#CCC，设置四周补白10px，并使两图之间距离为50px。最后，定义其为左浮动。

对内层<div>进行设置：首先仍然是设置其position属性为relative，这也是本例最关键的一步，之后设置内层div的背景色为#FFF，并设置边框样式和内边距padding。left和right类样式分别定义了左侧图片的内侧<div>的偏移量和右侧图片的内侧<div>的偏移量，这句话可能有些饶舌，请读者仔细理解，也就是说我们在网页设计时必须让内侧的<div>进行位移，而左侧图片的位移方向与右侧图片是不同的，所以分别用left和right来进行设置。