加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

CSS利用小图片实现透明圆角效果

[日期:2010-01-20] 作者: 来源: [字体: ]

而在本例中,将背景图片也圆角化,好像目前在网络上还没有这样的功能应用,我只见过用js方式来实现的,可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创,如有雷同,只能说英雄所见略同。呵呵!

还是先看看最终的效果图,让大家有一个大概的印象。


图一

像这种小面积布局在网页设计中应用得很普遍,但目前网络流行的作法都是采用图片的方式来实现的,将图片按上中下切成三块内容,然后使用三个同级的DIV或SPAN容器各自填充一张图,但是这种方法有一个最大的毛病:不能自动适应宽度的变化,一般做法都是采用固定宽度的方式,这是由于图片的宽度决定的。

当然对于一些比较有经验的人员来说,可以采用九宫格布局(可参看我的另一篇文章《九宫格基本布局》)方式或者滑动门方式来做到自适应宽度的变化,九宫格一般都需要用到八张图片,而滑动门虽然只用一张图片,但为了适应宽度的变化,这张图片一般都做得很大。
而我现在独创的这种方法可以完全做到适应不同宽度的需要,并且全部兼容所有的浏览器,而所需要的仅仅是一张很小的水平平辅的背景图片而已。

关键词:圆角  透明 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (0)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款