首页 » 建站技术 » 浏览内容

实现CSS图片边框效果的方法


2006-01-14 16:37:01 5,768 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

From:http://blog.timetide.net/archives/2005/02/23/20050223091650.php

图片边框效果主要有两种,较简单的方法是直接在CSS文件中对img定义边界(border),例如我在CSS中定义了:

img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }

那么在HTML文件中,或者在blog更新的时候,针对嵌入的图片定义class=”framed”就会有相应的边框效果。


上面的方法的优点是比较简单,但实现的效果比较单调,并不一定能达到令人满意的效果和一些特殊效果,例如阴影,色彩变化等等。下面介绍第二种方法,比第一种稍微复杂一些。很多Blogger喜欢在每篇文章中附带一副固定大小的图片,图文并茂的网页看起来更加生动。这个时候我们可以为图片设计更加个性化的边框效果,让网页的视觉效果更加丰富,不过这种方法需要对图片大小进行限制。

实例:CSS图片边框效果 – CSS Image Frame

首先需要制作一个边框效果的背景图片 ,然后在CSS中对背景边框定义图片替代(Image replacement)和定位和平移。我制作了一个例子,有兴趣的朋友可以下载源文件并在自己的网页中进行实验。特别指出,这个效果中图片尺寸是:163px X 105px


很多朋友会奇怪为什么需要3个框,上图演示了边框效果图在CSS定义中的处理过程,可以看到,在边框效果背景文件中的3个框,分别为默认,鼠标划过,以及点击后定义了不同的效果。然后通过CSS中的定位平移进行控制。在CSS网页设计中,图片替代以及定位平移是经常使用的技巧,这种方法不但解决了对于不同浏览器之间的适用性,也避免了负载图片过大而影响浏览速度的问题。更重要的是方便易用,我们不需要使用Photoshop对所有图片进行边框加工而能快速实现边框效果。

详细的方法可以看范例

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5064 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14158712 位访客

广告区 Guǎng Gào