网址

http://jquery.malsup.com/corner/

jQuery Corner是一款jQuery的插件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进。现在项目放在github上，当然为了方便，本文会以附件的形式提供该插件，但要想得到最新版，请到项目的github上拿。

 
    之所以会像变魔术一样地展现圆角及其他样式，是由于该插件为目标元素增加了一些小条块，这些小条块为背景色，所以人眼看上去出现了圆角而已，其实就是小东西遮盖了本来的直角。
 
    看来我真不是干魔术师的料，一上来就先把老底给揭了出来。不急，我再补充一下，这个魔术的一些要求：
 
1、插件专为block元素编写，所以div、p等均适用；而inline的元素则没有那么幸运了，当然也不是说inline根本不能用，只是面对为span增加corner要多费点神。不过，正常人不会和span的圆角较劲吧，把span改成div得了。
 
2、对于插件新增的border-radius功能，IE<=8全体不支持，除了IE外全体浏览器都支持。娘的，再对自己国度IE6泛滥的现状深切鄙视一下。
 
    OK，介绍完了基本要点。教大家如何使用，这是重点，但很简单。
    第一步，构建基本HTML网页和DIV格局，并CSS。

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div{
  5. width:350px;
  6. height:200px;
  7. background-color: #6af;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div></div>
  13. </body>
  14. </html>

效果如下：

 
 
    第二步，引入jQuery，和jQuery Corner插件。

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.corner.js"></script>
  5. <style type="text/css">
  6. div{
  7. width:350px;
  8. height:200px;
  9. background-color: #6af;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div>
  15. </div>
  16. </body>
  17. </html>
    此时，还是刚才图的效果，直角没变。
 
    第三步，写js代码，让插件对DIV块起作用。

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.corner.js"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. $("div").corner();
  8. });
  9. </script>
  10. <style type="text/css">
  11. div{
  12. width:350px;
  13. height:200px;
  14. background-color: #6af;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. </div>
  21. </body>
  22. </html>
    此时，圆角就出现了。
 
    至此，小功告成。开始拓展拔高啦。
 
********************************拓展************************************
 
    一、有多种Corner可选
    如果你喜欢凹状，那么上图第一排，第三列就是好选择。先认识个单词notch，就是凹槽的意思。只需把一处代码改成：

点击(此处)折叠或打开

  1. <script type="text/javascript">
  2. $(function(){
  3. $("div").corner("notch");
  4. });
  5. </script>

就可以得到这个效果：

 
    这里出现了明显的问题，当前在chrome下只有一个角。在IE下也不正常。滴答滴答，时间经过了近半个小时。我终于发现：
 
    应该给有角的Div加一个父Div，否则我自己做的例子中父级为body，而插件自己还要再增加一个Div，就弄乱套了。所以我修改了最初的代码：

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.corner.js"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. $("#mydiv").corner('bevel');
  8. });
  9. </script>
  10. <style type="text/css">
  11. #mydiv{
  12. width:350px;
  13. height:200px;
  14. background-color: #6af;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div>
  20. <div id="mydiv"></div>
  21. </div>
  22. </body>
  23. </html>

看图吧：

    但有两句话需要大家注意（原文）：
* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.
* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode.
    所以，尽量老老实实地用Corner样式吧。
    
    二、有多种位置可选
    可以使用top/bottom/left/right/tl/tr/bl/br设置corner出现的具体位置。看图：
    比如对于notch而言，想为mydiv的底部增加notch效果，则改写代码如下：

点击(此处)折叠或打开

  1. $("#mydiv").corner('bevel bottom');

于是，就只有底部产生notch角了。

 
    
    三、可自定义角度大小
    这功能很好，填写个像素值，就能改变角度。试试吧：

点击(此处)折叠或打开

  1. $("#mydiv").corner('bevel bottom 50px');

惊奇的图像如下：

 
    神奇吧，呵呵，还有呢。
 
    四、混搭
    就刚才这个例子，把上边两个角变为圆角，而下方仍然不变。看代码：

点击(此处)折叠或打开

  1. $("#mydiv").corner('top 30px').corner('bevel bottom 50px');

没错，就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。

 
    五、边框装饰
    这是亮点，感谢一个名叫Kevin Scholl的家伙提出的这个建议，不过这的确是一个非常棒的提议。看代码吧：

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.corner.js"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. $("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
  8. });
  9. </script>
  10. <style type="text/css">
  11. #mydiv{
  12. width:360px;
  13. background-color: #600;
  14. }
  15. #mydiv p{
  16. width:350px;
  17. height:200px;
  18. background-color: #6af;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>
  24. <div id="mydiv"><P></p></div>
  25. </div>
  26. </body>
  27. </html>

就会这样：

    这图是chrome下的效果，IE下还不一样，夜色很晚了，没时间调试深入发现问题的原因。

Jquery div边框大全的更多相关文章

  1. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  2. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery的基本事件大全

    ].name); });jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行. $.getScript(”test.js”, funct ...

  4. 实现鼠标悬停,div勾画div边框的动画

    鼠标悬浮,边框div边框的动画样式,效果图如下: 首先定义div及其样式: <style> .show { width:300px; height:200px; border:1px so ...

  5. C#-WebForm-设置div边框为内边框：box-sizing:border-box;

    设置div边框为内边框:box-sizing:border-box;

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. 转载 常用Jquery插件整理大全

    常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...

  8. css美化Div边框的样式实例*（转载）

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  9. 十分钟玩转 jQuery、实例大全

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

随机推荐

  1. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  2. easyui datagrid用formtater的问题

    当value是一个字符串是直接使用value会提示value没有定义,这时需要转换下value,用""+value来替换就可以了.

  3. js动态删除div元素

    在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...

  4. 数据库中substring的使用方法 CONVERT(varchar(12) , getdate(), 112 )

    Sqlserver中经常要操作一些时间类型的字段转换,我又不太记得住,所以搜集了以下的一些SqlserverConvertDateTime相关的资料发表在自己的小站里,方便自己以后要用的时候寻找,望对 ...

  5. POJ 1201 Intervals（图论-差分约束）

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20779   Accepted: 7863 Descri ...

  6. android87 Service

    ---------------------------------------------------------------------------- #Service(服务和Activity是运行 ...

  7. Thread和Runnable、run和start的区别

    多线程可以通过两种方式来创建: 一.通过继承Thread类. 二.通过实现Runnable接口. 那么中两种方式到底有什么区别呢?那种方式更好些呢? 先看看几个简单的Demo: Demo1 publi ...

  8. 2016iweb峰会参会总结

    2016年8月27日去国家会议中心参加iweb峰会. 8点半开始签到入场,8点20分排队签到的人已经排到另一个门口,人超级多啊. 9点一如既往的由h5女神娜姐开场. 上午场 基本是各公司的大佬们介绍各 ...

  9. C++ notes for beginners

    作者:马 岩(Furzoom) (http://www.cnblogs.com/furzoom/)版权声明:本文的版权归作者与博客园共同所有.转载时请在明显地方注明本文的详细链接,未经作者同意请不要删 ...

  10. 布隆过滤器（Bloom Filter）

    一.布隆过滤器介绍 Bloom Filter是一种空间效率很高的随机数据结构,Bloom Filter可以看做是对bit-map的扩展,它的原理如下: 当一个元素被加入集合时,通过K个Hash函数将这 ...