当圆角且阴影的图片时,你该怎么做？

PSD设计图

    当遇到圆角并且有阴影的图片时，你是怎么处理的？
    我们在切图时，避免不了会有圆角加阴影的图片，一般为了省时间嫌麻烦，就直接把整张图片（图片+圆角+阴影）切下来，以img的形式放上去。
    但如果是动态更改图片时，上面的做法使得编辑人员以后得每张图片都要处理成圆角+阴影效果。这样为了一时的方便，使以后的工作更加复杂，何不刚开始就考虑清楚，做个适应动态更新图片的样式呢？

 

具体做法：
把阴影跟圆角作为背景，用定位和并列的方法，通过层次来解决这个问题。

素材：
背景图片

图    片

部分css：
.roundPic{width:350px; margin:50px auto;}
.roundPic ul{ list-style:none; overflow:hidden;}
.roundPic ul li{ width:105px; height:135px; overflow:hidden; margin:0px 5px; float:left; position:relative;}
.roundPic ul li .imgLink{ position:relative; display:block; width:98px; height:99px; padding:1px 6px 7px 1px; background:url(bg3.png) no-repeat;z-index:1px; text-indent:-1000px;}
.roundPic ul li img{ position:absolute; z-index:0; top:1px; left:1px;}
.roundPic ul li h3{ height:20px; line-height:20px; text-align:center; color:#f00; margin-top:4px;}
部分html：
<div class="roundPic">
    <ul>
        <li>
            <img src="lb.jpg" width="98" height="99" />
            <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a>
            <h3><a href="#">标题：某某某</a></h3>
        </li>
        <li>
            <img src="lb.jpg" width="98" height="99" />
            <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a>
            <h3><a href="#">标题：某某某</a></h3>
        </li>
        <li>
            <img src="lb.jpg" width="98" height="99" />
            <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a>
            <h3><a href="#">标题：某某某</a></h3>
        </li>
    </ul>
</div>

这里只是贴了部分代码，对于css reset 没有贴上

最后效果：

已测试兼容：IE6+、FF、Chrome、Safari、Opera主流浏览器