使用CSS创建阴影效果

通常人们都是使用背景图像来给DIV边框加上阴影效果的。其实使用纯CSS也可以完成相同的任务，甚至还可以给文本打上阴影。使用CSS给页面元素添加阴影的效果可能不及使用背景图像的方法来的精致漂亮，但是如果你只是想创建一个简洁的阴影效果，使用CSS要比使用背景图像简单的多，另外它还省去了加载图像的时间，这样页面的加载就要快一点。

DIV通常是一个长方形的区域，给一个DIV加上阴影的原理是在它的周围在加上一个DIV，然后把第二DIV的位置向下移动一点来创建阴影效果。具体步骤如下：

1. 先创建一个DIV，并在里面放上你要加入的内容

<div class="content">
  <p>
  这是DIV元素，你可以在这里放图片或者文字，我们将会给这DIV加上阴影效果。
  </p>
</div>

2. 在这个DIV上加上另外一个DIV，用来创建阴影

<div class="shadow">
  <div class="content">
    <p>
      这是DIV元素，你可以在这里放图片或者文字，我们将会给这DIV加上阴影效果。
    </p>
  </div>
</div>

3. 给DIV加上CSS样式

.content, .shadow {
  position: relative;
  bottom: 4px;
  right: 4px;
}
.shadow { 
  background-color: #ccc; 
  margin-left:30px; 
}
.content {
  margin-top:30px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 5px 5px 10px;
}

注意：这里DIV(class为'.content')的宽度将继承其父元素的宽度，如果我们在上述HTML的外层在加上一个DIV（宽度为400px），那么你就可以把内层DIV(calss为'.content')的宽度j限制在一定范围了。

演示和代码