07使用CSS设置阴影图片

使用CSS设置阴影图片

有时候为了使网页美观，需要给图片加上阴影，让图片有一种特殊的效果。

设计步骤：

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

（2）定义图片的阴影，其实给图片加阴影的原理很简单，就是运用两个<div>块的相对位置偏移来实现，阴影的宽度和颜色深浅的值可由用户决定，也就是CSS中的相对定位属性position：relative；。

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

（4）对内层的<div>进行设置。首先是设置器position属性为relative，这也是本实例最为关键的一步，之后设置内层div的背景色为#FFF，并设置边框样式和内边距padding。

（5）left和right样式分别定义了左侧和右侧图片的内侧<div>的偏移量，即必须让内侧的<div>进行位移，而左侧图片的位移方向与右侧图片是不同的，所以分别用left和right来进行设置。

最终结果图如下图。