CSS+Jquery实现页面圆角框方法大全


Posted in Javascript onDecember 24, 2009

所以我就想用一个既方便调用又方便更新的方法来实现,结果如愿以偿。先将此技术点总结如下:

在此之前我也寻找过目前网络上最流行的做法的实现方案,大体共总结出7种方法,但是发现他们的方法多多少少都存在缺陷,后来我自己做出了我自己觉得满意的方法。
先看目前网络上最流行的7种做法:

1,无图片纯css圆角框

收录理由:兼容性强,不用图形

CSS+Jquery实现页面圆角框方法大全

图一

特点:

1.不用任何图形,使用很多个div容器模拟出圆角效果。

2.兼容性:通杀所有浏览器

缺点:

1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余。

2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。

3.边框颜色虽然可以调节,但会对页面中的结构产生致命的影响,适用于色彩单一并且一个页面中圆角应用不多的页面。

4.不容易实现圆弧内有渐变色的图形背景。

5.圆角框不够圆滑,有锯齿现象,适合于背景色和当前色色差不大并且圆弧较小的网页。

实现原理:

用很多1像素高的div容器,利用背景色和边框色来模拟出圆角框的轮廓线。

实例演示: http://www.cssplay.co.uk/boxes/snazzy.html

2,无图片纯css圆角框,用特殊字符(&bull)

收录理由:圆滑,不用图形

CSS+Jquery实现页面圆角框方法大全

图二

特点:

1.不用任何图形,使用特殊字符•(圆点)模拟出圆角。

2.兼容性:通杀所有浏览器

3.圆角平滑

缺点:

1.构造这个圆角一样需要加入无语义的标签,结构冗余,同第一种一样。

2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,需要调整四个角图片的定位,并且字符大小对其有影响,灵活性不够。

3.颜色虽可调节,但要求里面的背景色和字符的颜色相同,不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。

4.一样不容易实现圆弧内有渐变色的图形背景。

实现原理:

用特殊字符(&bull),利用定位,截取四分之一圆模拟出圆角框的一个角图片。

实例演示:http://www.cssplay.co.uk/boxes/curves.html

3,图片圆角框

收录理由:兼容性强,可以表现很复杂的圆角效果。

CSS+Jquery实现页面圆角框方法大全

图三

特点:

1.使用四个圆角图形(或一个圆图片)。

2.兼容性:通杀所有浏览器。

3.这是最常用的圆角框做法。

4.因为采用图片来表现,所以其圆角是超级平滑,无任何锯齿现象。

5.表现丰富,适用于各种对图片表现要求较高的圆角框。

缺点:

1.构造这个圆角也需要加入四个标签来装四张角图片,结构也有冗余。

2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则要重新制作一套圆角图片。

3.如果对结构的冗余没有特别的需求,这就是超级圆滑圆角框的解决方案了。

实现原理:

利用九宫格原理,在一个容器的四个角加入绝对定位(或相对定位)的四张圆角图片。

实例演示:http://www.cssplay.co.uk/boxes/three_cornered.html

4,利用VML绘制圆角(ie only)

收录理由:无图片,平滑,可加阴影边框

CSS+Jquery实现页面圆角框方法大全

图四

特点:

1.不用任何图形。

2.兼容性:只能在IE中使用

3.圆角半径随意调整

4.重用性强:多个圆角任意调用。

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

缺点:

1.除了兼容性 有问题外,其它方面的表现都不错。

2.不能在圆弧中表现丰富的有渐变的图片,因为圆弧外框是透明的。

实现原理:使用IE专用的VML来画出圆角。

<v:roundrect

id=”roundbox”

class=”circle”

strokecolor=”red”

strokeweight=”2px”

arcsize=”0.08″>

</ v:roundrect >

注意加入引用空间:

<html xmlns:v xmlns=”http://www.w3.org/1999/xhtml”>这是兼容的用法,xmlns:v一定不能少,否则。。。

样式表中加入这一句话:

v”:*{behavior:url(#default#VML);display:inline-block;}

Arcsize为半径

Strokeweight为边框线宽度

Strokecolor为边框线的颜色

实例演示:(请在IE系列浏览器下查看本实例)

 

VML画平滑圆角

使用IE专用的VML来画平滑圆角框,还可以画出阴影效果。就其图形表现来说,是非常完美的。

5,利用私有属性绘制圆角(FF3 only)

收录理由:平滑无锯齿

CSS+Jquery实现页面圆角框方法大全

图五

特点:

1.不用任何图形。

2.兼容性:只能在FF3中使用,其它浏览器不受支持。

3.圆角半径随意调整

4.重用性强:多个圆角任意调用,只需要样式表设置就可以。

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

缺点:

1.除了兼容性 有问题外,其它方面的表现都不错,这种方式应该是最完美的方式,可惜目前只有FF3能支持这个属性,以后CSS3后会支持这个属性,不过这不知道要等到多少年以后。

2.同第五种圆角一样,在处理圆弧内的图片背景时显得有些有心无力。

实现原理:

使用FF3专用的私有属性来画出圆角。

只用两种属性就能体现圆滑的圆角框

-moz-border-radius:10px;

Border:5px red solid;

实例演示:(请在FF3浏览器下观看,其它浏览器不支持)

 

FF3私有属性画的圆角框

FF3下的圆角框两个属性就可以解决:

-moz-border-radius:半径

border:边框

6,无图片脚本圆角框(js半完美解决方案)

这种方案目前应该是比较完美的方案了。

CSS+Jquery实现页面圆角框方法大全

图六

特点:

1.不用任何图形。

2.兼容性:通杀所有浏览器

3.圆角半径随意调整

4.重用性强:多个圆角任意调用。

5.颜色随意设置,并且可以使用复杂的图片做为背景,表现丰富。

6.结构无冗余,只需要在容器上定义一个class或ID就可以将这个div变成圆角。

7.圆角平滑。

缺点:

1.客户端禁用JS时就无圆角,不过在目前情势下,这种情况应该不会成为太大的问题。

实例演示:http://www.curvycorners.net/examples.php(有三个演示例子)

7,无图片vml/canvas结合的圆角框

增补一种方案,结合jquery/vml/canvas的无图片圆角框。

CSS+Jquery实现页面圆角框方法大全

图七

特点:
1.不用任何图形。
2.兼容性:通杀所有浏览器
3.圆角半径随意调整,并且四个角可以随意设置要不要圆角。
4.重用性强:多个圆角任意调用。
5.颜色随意设置,并且可以使用复杂的图片做为背景,表现丰富。
6.结构无冗余,只需要在容器上定义一个class或ID就可以了。
7.圆角平滑。
缺点:
1.本圆角需要用到jquery库,和一个JS文件,如果在您的项目中已经用到了Jquery这个库,倒还可以用得上,不然,为一个圆角加载一两个JS文件有点得不偿失。
2.圆角在不同的浏览器下显示有点小小的问题.
实例演示:http://labs.parkerfox.co.uk/cornerz/

结语:目前的css因为不能为一个容器中定义多张背景图片,造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性,可能到哪时,就是 圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性(-moz-border-radius)的方法,这也可以完美地解决这个问题。 但在目前的情势下,可能也只有用上面的这些方法来过渡了,强烈期待CSS3的到来。

总而言之:要实现绝对的完美圆角框在目前的形势下基本上是不可能的,所以取名为“半完美解决方案”。

---------------------------------------------------------------------------------------------------------------------------------

我的解决方案:CSS+Jquery+四个角的圆角图片 

第一步:到网站http://jquery.com/上下载jquery-1.3.2.min.js文件,整个工程引用该文件。
即将<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到页面<head></head>中,注意src的路径随情况而变。
第二步:在需要实现圆角框的页面写Jquery方法(Jquery是JS的一种框架技术)。
源码:

<div class="corner2 clear"> 
<div class="bnlist detail"> 
<asp:Button Text="查询" ID="btsearch" runat="server" OnClick="btnSearch_Click" /> 
<asp:Button Text="导出" runat="server" OnClick="btnExport_Click" /> 
<asp:Button Text="打印" ID="btnPrint" runat="server" OnClick="btnPrint_Click" /> 
<asp:Button Text="连续打印" runat="server" OnClick="btnContinuePrint_Click" /> 
</div> 
</div>

JS代码:
<script type="text/JavaScript"> 
$(".corner").prepend("<div class=\"cortop\"><div class=\"bgcortopl\"></div><div class=\"bgcortopr\"></div></div>"); 
$(".corner").after("<div class=\"corbom\"><div class=\"bgcorboml\"></div><div class=\"bgcorbomr\"></div></div>"); 
</script>

生成的HTML代码:
<div class="corner"><div class="cortop"><div class="bgcortopl"/><div class="bgcortopr"/></div> 
<div class="bnlist detail"> 
<input type="submit" id="ctl00_CphContent_btsearch" value="查询" /> 
<input type="submit" value="导出" name="ctl00$CphContent$ctl00"/> 
<input type="submit" id="ctl00_CphContent_btnPrint" value="打印"/> 
<input type="submit" value="连续打印" /> 
</div> 
</div> 
<div class="corbom"><div class="bgcorboml"/><div class="bgcorbomr"/></div>

第三步:编辑CSS样式,实现你想要的圆角样子。

总结:以上只要将要做圆角的DIV块的源码中class="corner",通过调用JS代码后就可以生成想要做圆角背景的div标签,就不需要每做一个圆角块手动添加那些代码,这样就使得工作简单,源文件也清晰精简,方便研发人员和UI人员。

Javascript 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
jQuery中的select操作详解
Nov 29 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 #Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 #Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 #Javascript
window.js 主要包含了页面的一些操作
Dec 23 #Javascript
js 效率组装字符串 StringBuffer
Dec 23 #Javascript
jquery 表单取值常用代码
Dec 22 #Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python动态参数用法实例分析
2015/05/25 Python
基于Python实现文件大小输出
2016/01/11 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python 如何创建一个线程池
2020/07/28 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
个人查摆剖析材料
2014/02/04 职场文书
党员党性分析材料
2014/02/17 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js