当前位置：首页 → 问答吧 → 当圆角且阴影的图片时,你该怎么做？

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

时间：2010-06-03

来源：互联网

PSD设计图

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

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

素材：
背景图片

图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="default.css" rel="stylesheet" /> <title>某某某 - 人生旅途中</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;font-weight:normal;} .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(http://bbs.blueidea.com/attachment.php?aid=145259&k=4d00157fe67b55df96adf84bd9bf66f6&t=1275502775&noupdate=yes) 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;} </style> </head> <body> <div class="roundPic"> <ul> <li> <img src="http://bbs.blueidea.com/attachment.php?aid=145258&k=fb21e5e2a948cb054b5085561bcdadc5&t=1275502775&noupdate=yes" width="98" height="99" /> <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a> <h3><a href="#">标题：某某某</a></h3> </li> <li> <img src="http://bbs.blueidea.com/attachment.php?aid=145258&k=fb21e5e2a948cb054b5085561bcdadc5&t=1275502775&noupdate=yes" width="98" height="99" /> <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a> <h3><a href="#">标题：某某某</a></h3> </li> <li> <img src="http://bbs.blueidea.com/attachment.php?aid=145258&k=fb21e5e2a948cb054b5085561bcdadc5&t=1275502775&noupdate=yes" width="98" height="99" /> <a href="#" class="imgLink" hidefocus="" title="某某某">某某某</a> <h3><a href="#">标题：某某某</a></h3> </li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

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

最后效果：
[img] [/img]

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

[ 本帖最后由 sfzheng2007 于 2010-6-3 02:21 编辑 ]

作者: sfzheng2007 发布时间: 2010-06-03

这个样子的话自由度实在太差。
个人觉得还是九宫图的方法最为合适。

作者: yamanyin 发布时间: 2010-06-03

复制内容到剪贴板