当前位置:首页 > DIV+CSS实例 > 正文

用CSS为图片加上圆角外边框立体效果

作者:××× 来源:aa25.cn 【 】 浏览: 添加日期:2008-12-16 我要评论(5)     

此例是使用预先制作好的带立体效果png图片来实现,通过相对定位和绝对定位使之覆盖在图片之上,通过png的通明特性显示出后来的图片来实现的一种方法。也声明一下是通过图片结合css来实现的,并非全用css实现的。

<style type="text/css">
body { text-align: center; font: 12px Arial normal; }
.frame-block { margin: 0 auto; position: relative; height:500px; width: 335px; }
.frame-block span { background: url(/uploadfile/frame.png) no-repeat center top; height:500px; width: 335px; display: block; position: absolute; }
span { behavior: url(/uploadfile/iepngfix.htc) }

 

<div class="frame-block"> <span></span> <img src="/uploadfile/sample.jpg" /> </div>

实现原理:应用css的相对定位和层叠顺序,用一张带边框且中间透明的png图片,盖到图片上边,通过png的透明特性透出后来的图片来实现的。来例中有几个技术关键点:

  1. 相对定位和绝对定位 如果设置一个元素为绝对定位,那么它是相对于浏览器进行定位的。但当它的父元素采用相对定位时,那么它则相对于父元素进行绝对定位。这点是许多朋友迷糊的地方。也是frame-block设置position: relative的原因。
  2. 层次 当窗口采用position: absolute绝对定位后,它将脱离原来的束缚,不再显示的固有的位置,而是相对于浏览器或父元素的位置显示的。这时就有一个层级的关系,也就是谁显示在上边的问题,这个可以应用css的z-index来定位。因为本例只有一个绝对定位的层,所以就不用设置层级关系了。
  3. PNG透明 png图片是可以透明的,本例中使用png图片正是利用它的透明特性透出下面的图片实现的,但IE6对png图片支持并不友好,在IE6下将不透明(现在你知道IE有多垃圾了吧)。本例中span调用iepngfix.htc文件正是解决IE6下透明问题的,具体实例请参考《国外高人写的HTC方式PNG图片背景透明可加链接的方法》。如果你觉得这种方法麻烦,也可以用gif图片来实现,但gif图片显示效果没有png好。它不支持渐变透明,透明与不透明边缘不能抗锯式。

本例的缺点:只能固定大小,不能随图片大小的改变而改变,所以此效果一般应用在图片列表上

下面请看演示:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: 图片边框 图片立体边框 圆角边框 css圆角

更多评论(5)..会员评论

beixiaosheng(221.7.*.*) 发表于:2010-10-30 14:33:07
站长啊~图好像挂了
管理员回复:已修复好了
violin0889(125.83.*.*) 发表于:2010-10-29 17:00:46
轮播是怎么做的,分析一下结构,谢谢
violin0889(125.83.*.*) 发表于:2010-06-01 18:05:17
希望能够随图片的大小变化而变化,图片每个角都没有问题。有什么好的办法?
管理员回复:比较麻烦了
hehehe(125.44.*.*) 发表于:2009-09-30 12:24:12
站长真热情~~~~~~~~~~~~
shek(121.9.*.*) 发表于:2009-02-01 23:04:36
发现这里的站长真的是太热情了~ 从此爱上了这个网站~!一定常来~~继续加油噢!!
管理员回复:好的,欢迎常来~~

出差旅游免费预订酒店

【视频教程】新手常见问题