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

用CSS的padding和border属性为图片设置双边框效果

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

其实这个例子很简单,只是padding和border的在图片上的一个应用实例,希望能通过此例子,更好地了解padding和border的用法,达到举一反三的目的。有关padding和border的更详细用法介绍,请参看css在线手册中的《http://www.aa25.cn/css2/padding_padding595.shtml》和《http://www.aa25.cn/css2/border_border618.shtml》。

<style type="text/css">
body {text-align: center; font-family:Verdana;}
.img1 { padding:5px; border:5px solid #333;}
.img2 { padding:5px; border:1px solid #333;}
.img3 { padding:5px; border:5px solid #333; background: #c33;}
</style>

 

  <p><img src="uploadfile/sample.jpg" class="img1" /></p>
    <p><img src="uploadfile/sample.jpg" class="img2" /></p>
  <p><img src="uploadfile/sample1.jpg" class="img3" /></p>
 

实现原理:用padding设置图片内边距形成一个边框的效果,用用border设置图片的边框。这样就形式了双边框的效果。可以设置成padding和border相同的宽度,这样出出来的双边框效果比较对称。不过也可以设置边框细一点或内边距小一些,当然你也可以改变背景颜色的方法改变padding形成的边框效果的颜色。希望大家能灵活运用。

下面是演示效果:


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

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

〖DIV+CSS实例〗Tags: padding border 双边框 图片双边框 css图片边框

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

出差旅游免费预订酒店

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