基于CSS技术的圆角矩形的实现.pdfVIP

第26卷 第5期 忻 州 师 范 学 院 学 报 Vo1．26 No．5 2010年 l0月 JOURNAL OF XINZH0U TEACHERS UNIVERSITY Oct．2010 基于CSS技术的圆角矩形的实现 周剑强 (忻州职业技术学院，山西 忻州 034000) 摘 要：圆角矩形是网页设计中的常用元素，在页面布局时经常会用到，但至今尚没有一 个完美的解决方案。在传统设计 中，为了实现圆角矩形效果，大都使用带圆角的图片作为背 景，这种方法必然导致对图片的反复调用，降低页面的加载速度，造成不良的用户体验。文章 从一个新的角度出发，单纯使用CSs2．0技术实现了圆角矩形。这种方法不再需要调用图片， 只调用简短的CSS代码，大大节省了网络带宽，同时取得 了较优质的视觉效果，而且在不同种 类和版本的浏览器中具有 良好的兼容性。 关键词：圆角矩形；网页设计 ；容器 中图分类号：TP393 文献标识码 ：A 文章编号i1671—1491(2010)05—0028—03 圆角矩形是网页布局中的一种常用图案，一个文字块或 观度。如图1所示： 者栏 目经常会用圆角矩形来进行设计 ，以提升它们的视觉美 爿艺京小升初 【幼升小】20103t,京幼升小入学择棱必备手册 【小升初】201叫E京小升初择棱撩位全攻略 201础b京小升初政策看点汇总 -各区县小升初 王晋堂谈gg-3q-小视频 ：201呦 升小现扶和趋势 小升初招生信息汇总 20101b京中学小升初信息 穑华 ：附中没有权利公开 海淀区教委 ：小学生体质检溺改革 非学校上报 海淀区体质监i刚成绩直接挂钩明年小升初推忧 小升初关注 ：个人艺术特长加分敢策格取消 中小学学籍管理新办法 不樨开除学生 惜读放宽 幼升小关注 ：北京部分小学划片范围并不固定 七类中小掌惜读生升学按北京市户籍对待 图 1 网页中圆角框效果示例 圆角矩形效果一般都是用图片来实现的，以带圆角的图 现圆角矩形效果。设计原理如图2所示： 片作为背景即可。但是网页的内容都是动态的，会经常更 新。背景图片的尺寸却是固定的，无法适应网页内容的长宽 变化。传统网页设计中，人们使用 “九宫格”技术或 “滑动门 (SlidingDoors)”技术来实现背景图片的自由伸缩。以图 1 的效果为例 ，设计者会把背景图片切分为上、中、下三个部 分。分别置于三个 div容器，中问部分的高度就可以自由伸 缩。但即便如此，也无法摆脱 web客户端对图片的大量调 用，占据宝贵的带宽，影响页面加载速度。 文章所要实现 的就是完全脱离背景图片，单纯使用 CSS2．0技术来实现圆角矩形效果。大家都知道 ，在 CSS中， background和border两个属性是用来定义对象的背景和边框 的，文章拟使用这两个属性，结合margin(外补丁)属性来实 图2 圆角矩形设计原理示意图 收稿 日期：2010—08—16 作者简介：周剑强(1975一)，男，山西河曲人，忻州职业技术学院计算机系讲师，从事计算机教学与多媒体技术研究。 第5期 周剑强：基于CSS技术的圆角矩形的实现 29 由图2可知，圆角矩形实际是 由一个个宽度不同的div divclass： “r2” ／div 容器堆砌而成的，而不同的宽度 由对象的margin属性来设 divclass： “r3” ／div 置。图中共用到五个 div容器，从 divl到 div5五个对象的 divclas