• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > CSS+Jquery实现页面圆角框方法大全

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了Jquery,页面圆角框等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
所以我就想用一个既方便调用又方便更新的方法来实现,结果如愿以偿。先将此技术点总结如下:

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

1,无图片纯css圆角框

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

图一

特点:

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

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

缺点:

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

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

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

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

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

实现原理:

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

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

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

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

图二

特点:

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

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

3.圆角平滑

缺点:

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

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

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

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

实现原理:

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

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

3,图片圆角框

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

图三

特点:

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

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

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

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

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

缺点:

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

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

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

实现原理:

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

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

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

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

图四

特点:

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)

收录理由:平滑无锯齿

图五

特点:

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半完美解决方案)

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

图六

特点:

1.不用任何图形。

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

3.圆角半径随意调整

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

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

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

7.圆角平滑。

缺点:

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

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

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

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

图七

特点:
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的一种框架技术)。
源码:

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery中的siblings()是什么意思(推荐)
  • 2017-08-16实例讲解jquery中mouseleave和mouseout的区别
  • 2017-08-16JQuery包裹DOM节点的方法
  • 2017-08-16使用jQuery.form.js/springmvc框架实现文件上传功能
  • 2017-08-16jQuery EasyUI NumberBox(数字框)的用法
  • 2017-08-16jQuery实现的简单拖动层示例
  • 2017-08-16jquery 动态增加,减少input表单的简单方法(必看)
  • 2017-08-16jquery加载图片时以淡入方式显示的方法
  • 2017-08-16jquery tree 可编辑节点实现代码(jquery一句话节点菜单)
  • 2017-08-16基于JQuery打造无缝滚动新闻步骤详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 全面详细的jQuery常见开发技巧手册
    • jQuery 删除/替换DOM元素的几种方式
    • jQuery实现页面顶部显示的进度条效果完整实例
    • Web前端新人笔记之jquery入门心得(新手必看)
    • jQuery+Ajax实现无刷新操作
    • jQuery实现分章节锚点“回到顶部”动画特效代码
    • 基于JQuery的Select选择框的华丽变身
    • JQuery显示隐藏DIV的方法及代码实例
    • jQuery中click事件的定义和用法
    • 鼠标悬浮显示二级菜单效果的jquery实现

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有