基于CSS Sprites的可伸缩圆角矩形的设计
开篇：润墨网以专业的文秘视角，为您筛选了一篇基于CSS Sprites的可伸缩圆角矩形的设计范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘要:圆角矩形因为其样式比直角矩形更加漂亮,所以现在的Web标准下大量的网页布局都采用圆角矩形设计元素。该文结合css与图片两种实现圆角矩形技术的优势,应用CSS sprites设计了一种简单、高效的圆角矩形实现模式。该模式不仅可以在Web页面中多次调,具有重用性,而且还可以根据实际内容实现自动伸缩,便于设计者更加方便快捷的制作出布局美观的网页。
关键词:圆角矩形;CSS Sprites;网页;定位;伸缩
中图分类号:TP311文献标识码:A文章编号:1009-3044(2010)11-2618-02
Design of Automatic Telescoping Rounded Corners Based on CSS Sprites
FAN Dong-yan
(Shanxi University Business College, Taiyuan 030031, China)
Abstract:Rounded corners as its style even more beautiful than the right angle rectangles; therefore a large number of homepage layout uses the design elementof rounded corners under present's Web standard. The paper designed a simple and efficient implementation model of rounded corners by combination with the technology advantages ofusing CSS and images. This model with reusable not only may transfer many times in the Web page, but also can realize automatic telescoping according to the actual content. It enables designers to create a more convenient and efficient layout of beautiful web page.
Key words:rounded corner; CSS Sprites; web page; location; telescoping
在网站设计制作过程中,为了使Web页面的布局生动、美观,通常会在布局中使用圆角矩形。网页中的圆角矩形实现方法有图片与CSS两种:通常使用图片做圆角矩形的时候,如果直接将圆角矩形作为背景图片,则为了使圆角矩形能够根据内容自由伸缩,需要将圆角矩形分割成三个图片或更多,图片用的过多,势必会影响网站打开的速度;而用 CSS 实现圆角矩形时,虽然通用性强,修改简单,但兼容性与代码编写比较麻烦,使用起来太复杂,需要在想要实现圆角的地方堆加几个 DIV ,然后再设置样式属性,如果一个页面要在多处使用圆角效果,而且还要不同的样式,其工作量之繁琐可想而知。
本文中实现圆角矩形的设计经过反复实验,在分析了上述两种设计方式的基础上,综合其优势,设计了一种简单、高效的圆角矩形实现方式,可以方便的用于Web页面的制作中。
通常提高网站加载速度的最有效的方式之一就是减少Client端与Server端间的HTTP Request次数,而网页中的图片以及数据的请求就成为了降低请求次数的关键,对于数据请求,目前可以通过Ajax技术实现,而对于图片请求次数的降低,则需要通过CSS Sprites技术实现。即将网页中需要用到的多个图片整合到一张大图片中,然后通过CSS的定位技术,在需要图片的地方,将图片定位在这一张大图片上。对于当前网速而言,小于200KB的单张图片的载入时间基本上是差不多的,但是,如果能够降低请求次数,则对于提高网站加载速度大有裨益。
本文正是根据上述设计理念,在利用CSS Sprites技术的基础上实现的。具体的设计思路为:在一个矩形的四角绝对定位四个小圆角图形,同时利用CSS Sprites技术将四个小圆角放在一张图片上,通过CSS的定位来实现圆角矩形效果。如图1所示。
这种圆角矩形技术模型餐具了可以有效降低Client端与Server端间的请求次数外,其优点还表现在可以自由伸缩。因为四个圆角是固定在矩形上面的,矩形的宽度和高度可以随意改变,这样在一个网站中就可以任意调用了,根据所需大小的不同,只需要另外设置一个ID来控制大小即可。具体实现方法如下:
1.1 创建圆角Sprite
首先利用Fireworks软件制作四个圆角。因为Fireworks可以将图像定位到像素级别,所以比较适用于制作精确的圆角图形。通过Fireworks切割并导出一个圆角之后,通过翻转、复制,得到另外的三个圆角,然后将所需的四个圆角放在一张图片上(以一个像素的白线来区分),如图2所示。最后导出合成的图片,Sprite就创建完成了。
1.2 设计圆角矩形容器
在编写布局代码时,首先给容器 div定义一个.roundedBox类实现上述的矩形;然后再定义四个div 容器,并给每个div 容器加载一个类 .corner,用来指定前面所创建的圆角的位置。代码如下所示:
网页中圆角矩形的设计模型
.roundedBox {position:relative; padding:20px; margin:10px 0;}
这里还可以通过设定 margin 给div 留出一定的空隙。
3)对没有圆角的四个角作单独定位
对于四个角的图形定位,分别定义:toplefttoprightbottomleftbottomeright,而圆角图形区域内的文字则用cont控制或者一个P标签控制即可。
.topLeft { top:0; left:0; background-position:-1px -1px;}
.topRight { top:0; right:0; background-position:-20px -1px;}
.bottomLeft { bottom:0; left:0; background-position:-1px -20px;}
.bottomRight { bottom:0; right:0; background-position:-20px -20px;}
.cont { padding:20px;}
1.4 融合sprite实现自动伸缩
由于.roundedBox类仅仅用了控制矩形的padding和margin值,因此要实现矩形的自动伸缩,还需要在容器 div另外再定义一个ID="type1",用来控制矩形的宽度和高度,这样就可以保证在网页的任何地方都可以调用这个图形。
…