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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
webpack external模块的具体使用
Mar 10 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
JS实现时间校验的代码
May 25 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
js 利用className得到对象的实现代码
2011/11/15 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
Prototype框架详解
2015/11/25 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
园艺师求职信
2014/03/10 职场文书
公证委托书模板
2014/04/03 职场文书
大学新闻系求职信
2014/06/03 职场文书
义卖募捐活动总结
2015/05/09 职场文书
Java死锁的排查
2022/05/11 Java/Android