简单css阴影(1)-硬角阴影

以下两种方法在cssmastery上都有详细讲解。
需要使用一个大的阴影图像（下面是缩小后的效果）：

和一张图像：

<div class="shadow"><img src="images/mm.jpg" /></div>

一种方法是使用相对定位，这种方法比较好理解,没什么好说的：

.shadow {
    background: url(images/shadow.gif) no-repeat bottom right;
    float: left;
    line-height: 0; /*我个人理解这里为了去除img图像空白*/
}

.shadow img {
    background-color: #fff;
    border: 1px solid #a9a9a9;
    padding: 4px;
    position: relative;
    top: -5px;
    left: -5px;
    /*display: block; 如果不使用行高的话，用这个也可以*/
}

另外一种方法是使用负值空白边，不是很好理解，我简单的说说：

.shadow {
    background: url(images/shadow.gif) no-repeat bottom right;
    clear: right;  /*这里的作用我没有搞清楚，去除之后似乎也没影响*/
    float: left; 
  /*浮动以后会产生收缩包围的效果，这实际上是浮动元素宽高确定问题，
     浮动元素的width和height没有指定的话，那么宽高于内容相关*/
    
    position: relative; /*这里以及下面空行后代码是为了兼容IE6*/
}

.shadow img {
    margin: -5px 5px 5px -5px;
  /*这里实际上有点复杂，我也不想多做解释：两个5px作用是显示出阴影，
     两个-5px移动图像至阴影外*/
    background-color: #fff;
    border: 1px solid #a9a9a9;
    padding: 4px;
    
    display: block;
    position: relative;    
}

 效果图我就不放上来了。