CSS圆角矩形实现方法解析

2018-03-27高娟王小巍张卫清

求知导刊 2017年36期

高娟王小巍张卫清

關键词：圆角矩形;CSS;border-radius属性

中图分类号：TP393.0

文献标识码：A

1.背景图片实现圆角

这种方法实现圆角是最原始的方法。随着CSS技术的发展其实现方式也变得多种多样，下面介绍一种应用比较广泛的“宽度固定，高度自适应”圆角。

其实现关键点由4个块级标签构成：圆角矩形容器（box）—设置固定宽度，同圆角宽度;顶部圆角（radius-top）—使用背景图片实现顶部圆角;内容（content）—放置主体内容;底部圆角（radius-bottom）—使用背景图片实现顶部圆角。

所需的背景图片如图1所示。

HTML代码：

</div>

CSS代码：

.box{width：595px;background：#ebf3ff;}

.top_radius{background：url（/img/t_radius.jpg） no-repeat; height：3px;}

.btm_radius{background：url（/img/b_radius.jpg） no-repeat; height：3px;}

.content{padding：5px;}

2.CSS2.0+标签模拟圆角

这种方法实现圆角的原理是应用像素画中绘制弧线的方法进行模拟，在PS中将弧线放大后发现，弧线其实是由一个一个的像素点按照一定的弧形排列形成的，圆角矩形亦是如此。将圆角矩形放大后发现，矩形的顶部或底部的圆角可由2个宽度不同的盒子堆砌进行模拟（如图2所示）。以顶部盒子为例，从上到下的2个盒子的外边距分别为2px，1px。

HTML代码：

</div>

CSS代码：

.box{ width：340px;}

.radius_border_1{margin：0 2px;height：1px;background：#acc3e3;}

.radius_border_2{margin：0 1px;height：1px;background：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3;}

.content{background：#edf6ff;border-left：1px solid #acc3e3; border-right：1px solid #acc3e3; padding：20px;}

3.CSS3.0圆角属性实现圆角

CSS3中新增了border-radius属性，使用它可以设计元素以圆角样式显示。但是，目前该属性还不被IE8及其以前版本的浏览器所支持。Presto引擎和IE9+支持border-radius标准属性，Webkit引擎支持-webkit-border-radius私有属性，Mozilla Gecko引擎支持-moz-border-radius私有属性。

HTML代码：

CSS代码：

.box{width：292px;height：32px;padding：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期