CSS圆角矩形实现方法解析

1、    css圆角矩形实现方法解析    高娟 王小巍 张卫清關键词：圆角矩形;css;border-radius属性：tp393.0：a1.背景图片实现圆角这种方法实现圆角是最原始的方法。随着css技术的发展其实现方式也变得多种多样，下面介绍一种应用比较广泛的“宽度固定，高度自适应”圆角。其实现关键点由4个块级标签构成：圆角矩形容器（box）设置固定宽度，同圆角宽度;顶部圆角（radius-top）使用背景图片实现顶部圆角;内容（content）放置主体内容;底部圆角（radius-bottom）使用背景图片实现顶部圆角。所需的背景图片如图1所示。ht

2、ml代码：<div class="box"><div class="top_radius"></div><div class="content ">圆角矩形</div><div class="btm_radius"></div></div>css代码：.boxwidth：595px;background：#ebf3ff;.top_radiusbackground：url（/img/t_radius.jpg） no-rep

3、eat; height：3px;.btm_radiusbackground：url（/img/b_radius.jpg） no-repeat; height：3px;.contentpadding：5px;2.css2.0+标签模拟圆角这种方法实现圆角的原理是应用像素画中绘制弧线的方法进行模拟，在ps中将弧线放大后发现，弧线其实是由一个一个的像素点按照一定的弧形排列形成的，圆角矩形亦是如此。将圆角矩形放大后发现，矩形的顶部或底部的圆角可由2个宽度不同的盒子堆砌进行模拟（如图2所示）。以顶部盒子为例，从上到下的2个盒子的外边距分别为2px，1px。html代码：<div class=&qu

4、ot;box"><div class="radius_border_1"></div><div class="radius_border_2"></div><div class="content">圆角矩形</div><div class="radius_border_2"></div><div class="radius_border_1"></div><

5、;/div>css代码：.box width：340px;.radius_border_1margin：0 2px;height：1px;background：#acc3e3;.radius_border_2margin：0 1px;height：1px;background：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3;.contentbackground：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3

6、; padding：20px;3.css3.0圆角属性实现圆角css3中新增了border-radius属性，使用它可以设计元素以圆角样式显示。但是，目前该属性还不被ie8及其以前版本的浏览器所支持。presto引擎和ie9+支持border-radius标准属性，webkit引擎支持-webkit-border-radius私有属性，mozilla gecko引擎支持-moz-border-radius私有属性。html代码：<div class="box">圆角矩形</div>css代码：.boxwidth：292px;height：32px;p

7、adding：0 5px;border：1px solid #9dadc6;-moz-border-radius：2px;-webkit-border-radius：2px;border-radius：2px;4.三种方法的比较可以看出，第一种方法的优点是无需多余标签，能够实现个性化的圆角，将设计师的设计完美地以代码实现，但其缺点是增加了http请求和页面字节数。第二种方法优点是用纯css代码实现，易于维护，体积小，但其缺点是圆角像素越大，无意义标签越多，圆角越发呆板且只能实现纯色圆角，局限性大。第三种方法优点是专用css代码，易于维护，体积小，圆角自然圆滑，但其缺点是存在兼容性问题。参考文献：1生力军.css圆角矩形实现方法比较研究j.电脑知识与技术，2013（36）.2周剑强.基于css技术的圆角矩形的实现j.忻州师范学院学报，2010（5）. 求知导刊2017年36期求知导刊的其它文章