CSS圆角矩形实现的方法比较的研究.docVIP

CSS圆角矩形实现的方法比较的研究 　　摘要：圆角矩形作为原始DIV方形盒子的美化容器，能使网页的布局显得生动、美观，在网页设计中得到了广泛的应用，其实现方法多种多样，但方法的选择具有比较大的随意性。在总结各种主流CSS圆角矩形实现方法的基础上，从浏览器兼容性、网页体积大小、网页结构等不同方面对各种方法进行量化对比分析，能够深入揭示每种方法的优缺点。从而能确定在目前环境下最便捷、最科学、最高效的实现方法，并预测发展趋势。 　　关键词：CSS；圆角矩形；比较 　　中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）36-8401-04 　　在网络技术高度发达的现代社会，人们获取信息、共享信息的首选方式是通过网络，而网络信息的主要载体是网页，因此，网页在日常工作和生活当中的地位也越来越重要，网页制作技术也在适应这种趋势，快速发展中。传统的网页布局是通过表格的嵌套完成的，但这种方式将网页的内容、结构和表现混杂在一起，制作出来的网页不利于维护和搜索引擎的搜索。使用DIV+CSS的方式进行网页制作能使网页代码简洁、更新方便、兼容性更好，成为目前主流的网页制作技术。其中，DIV标签就成为网页中承载信息的容器，俗称“DIV盒子”，CSS是容器美化和布局的工具。一个网站的核心竞争力除了所传递的信息这种内涵的因素外，其外观、布局等外在的因素也越来越被重视。 　　圆角矩形作为原始方形DIV盒子的美化容器，能使网页的布局显得生动、美观，在网页设计中得到了广泛的应用，其实现方法多种多样。但各种实现方法的优缺点是什么，在什么情况下应该采用何种方法，哪种方法的效率最高，用户体验最好等等很多问题困扰着网页制作者。在总结各种主流实现方法的基础上，从浏览器兼容性、网页体积大小、网页结构等不同方面对各种方法进行量化对比分析，能够深入揭示每种方法的优缺点，从而最终确定在目前环境下最便捷、最科学、最高效的实现方法。 　　1 CSS圆角矩形实现方法 　　CSS圆角矩形实现方法多种多样，总体说来，大致分为三类：使用背景图片实现圆角矩形、纯CSS圆角矩形、使用border-radius创建圆角矩形等。 　　1.1使用背景图片实现圆角矩形 　　使用带圆角的图片来实现圆角矩形的设计是最原始的方法。其具体实现方式也随着CSS技术的发展而变得多种多样，大体可分为：固定宽度圆角、基于CSS Sprite的可伸缩圆角、利用CSS 3的border-image实现圆角等三种方式。三种方式各有优缺点，但不论使用哪种具体方式，其共同的特点是需要一张或多张带圆角的图片。 　　1.1.1固定宽度圆角 　　这种方式只需要使用顶部和底部两张带圆角的图片，用很少的HTML标签和图片实现了圆角效果，但其不够灵活，每次更改矩形的宽度都需要更新背景图片。 　　所需背景图片如图1所示。 　　 　　（a）固定宽度圆角顶部图片 （b）固定宽度圆角底部图片 　　图1 　　HTML代码： 　　 　　 　　.tl{left：0；top：0；background-position：0 0；} 　　.tr{right：0；top：0；background-position：-20px 0；} 　　.bl{left：0；bottom：0；background-position：0 -20px；} 　　.br{right：0；bottom：0；background-position：-20px -20px；} 　　1.1.3利用CSS 3的border-image实现圆角 　　这种方式可以将带有四个圆角的背景图片切成规则的9个不同部分，浏览器便会作为border的基本形状来进行渲染，不需要手动切开图片，可以避免圆角出现失真。不需要添加任何多余的HTML标签，使用非常简单，而且可以自由改变每个圆角的半径，但W3C并未确定这个属性的使用方法，目前只可以用浏览器的私有属性实现，浏览器兼容性较差。 　　所需背景图片示意图如图3所示。 　　 　　图3 border-image使用的背景图片示意 　　HTML代码： 　　圆角矩形 　　-moz-border-radius： 20px；-webkit-border-radius： 20px；border-radius： 20px；} 　　2 CSS圆角矩形实现方法比较分析 　　上述3大类共5种方法都是实现CSS圆角矩形的常用方法，一般来说，在选择实现方法的时候，除了网页特定逻辑功能的实现外，应当首先考虑用户体验。在内容和外观一致的情况下，用户体验主要取决于两个方面：一是页面能否按照预期效果解析，是否存在不能解析的标签或CSS，即浏览器的兼容性如何；二是页面的载入速度，而载入速度与页面的体积大小呈