jquery.corner.js可以实现各种块级元素的角效果，以下为演示，详见jquery_corner.html中的注释部分，并附百度盘下载

jquery_corner.html代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>jQuery-corner圆角</title>

     <style>

         .box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9,.box10,.box11,.box12,.box13,.box14{width: 100px; height: 100px;border:1px solid #fc7677;margin:20px;line-height: 100px; text-align: center;position:relative; float: left;}

         .box14,.box15,.box16{width: 100px; height: 100px;margin:20px;line-height: 100px; text-align: center;position:relative; float: left; background: #fc7677}

     </style>

     <script src="jquery.js"></script>

     <script src="jquery.corner.js"></script>

 </head>

 <body>

     <div class="box1">四角</div>

     <div class="box2">顶部两角</div>

     <div class="box3">左侧两角</div>

     <div class="box4">右侧两角</div>

     <div class="box5">底部两角</div>

     <div class="box6">顶部和左侧</div>

     <div class="box7">底部和左侧</div>

     <div class="box8">顶部和右侧</div>

     <div class="box9">底部和右侧</div>

     <div class="box10">左上角</div>

     <div class="box11">右上角</div>

     <div class="box12">左下角</div>

     <div class="box13">右下角</div>

     <div class="box14">四角为方角</div>

     <div class="box15">右下角为方角</div>

     <div class="box16">上方角下圆角</div>

     <script>

         $(".box1").corner("10px");//默认是四个角

         $(".box2").corner("top 10px");//顶部的两个角(左上角和右上角)

         $(".box3").corner("left 10px");//左侧的两个角(左上角和左下角)

         $(".box4").corner("right 10px");//右侧的两个角(右上角和右下角)

         $(".box5").corner("bottom 10px");//底部的两个角(左下角和右下角)

         $(".box6").corner("top-left 10px");//top-left，顶部和左侧，一共是三个角

         $(".box7").corner("bottom-left 10px");//bottom-left，底部和左侧，一共是三个角

         $(".box8").corner("top-right 10px");//top-right，顶部和右侧，一共是三个角

         $(".box9").corner("bottom-right 10px");//bottom-right，底部和右侧，一共是三个角

         $(".box10").corner("tl 10px");//top and left=>tl，顶部和左侧的一个角，左上角

         $(".box11").corner("tr 10px");//top and right=>tr，顶部和右侧的一个角，右上角

         $(".box12").corner("bl 10px");//bottom and left=>bl，底部和左侧的一个角，左下角

         $(".box13").corner("br 10px");//bottom and right=>br，底部和右侧的一个角，右下角

         $(".box14").corner("bevel 10px");//四角为方角，此方法必须要有背景色，且色值为RGB格式(否则不兼容)

         $(".box15").corner("bevel br 10px");//右下角为方角，此方法必须要有背景色，且色值为RGB格式

         $(".box16").corner("bevel top 10px").corner("round bottom 10px");

         //顶部为方角，底部为圆角，此方法必须要有背景色，且色值为RGB格式

         //注：以上方法适合块级元素使用，如：div p等标签，

         //建议实际使用时，在要实现角效果的div标签外再加一层div

         //其他角效果见JQuery Corner Demo.mhtml，用非IE浏览器打开查看。

     </script>

 </body>

 </html>

以下为效果图：

源码和jquery.corner.js和jquery.js及JQuery Corner Demo.mhtml百度网盘下载

提取码：3zwz

使用jQuery的插件jquery.corner.js来实现圆角效果-详解的更多相关文章

  1. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  2. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  3. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. jQuery对html元素的取值与赋值实例详解

    jQuery对html元素的取值与赋值实例详解 转载  2015-12-18   作者:欢欢   我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. jQuery插件开发的两种方法及$.fn.extend的详解(转)

    jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下   jQuery插件开发分为两种: 1 类级别 类级别你可以 ...

  8. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  9. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

随机推荐

  1. 三、JVM之方法区

    一.什么式方法区 方法区,也称非堆(Non-Heap),又是一个被线程共享的内存区域.其中主要存储加载的类字节码.class/method/field等元数据对象.static-final常量.sta ...

  2. 洛谷 P1463 [POI2002][HAOI2007]反素数

    题目链接 题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1, ...

  3. CCPC-wannafly Camp Day2 讲课内容总结（杜瑜皓-数据结构）

    ·栈.单调栈 1.栈的特点与基本操作 2.单调栈 单调栈是一种特殊的栈,其栈内的元素都保持一个单调性(单调递增或者递减). ·单调递增栈,从栈底到栈顶依次递增(单调非递减栈:允许有相等) ·单调递减栈 ...

  4. 十大排序算法（Java实现）

    一.冒泡排序(Bubble Sort) public class BubbleSort { public static void main(String[] args) { int[] arr = { ...

  5. 学习 lind api 十月 第5弹

    继续 四弹里的 自定义的api response message 但是 那上面的 那些值得也是包含

  6. sqli_labs学习笔记（一）Less-38~Less-53

    续上,开门见山 堆叠注入,实际上就构成了两条SQL语句 http://43.247.91.228:84/Less-38/?id=1' union select 1,2,3 --+    //未报错 h ...

  7. HTTP核心模块(HTTP Core)

    alias 语法:alias file-path|directory-path;默认值:no使用字段:location这个指令指定一个路径使用某个某个,注意它可能类似于root,但是document ...

  8. java反射机制梳理

    java反射机制梳理 Java反射简介 反射简介 编译和运行 编译时刻加载类是静态加载类.运行时刻加载类是动态加载类 要让Java程序能够运行,那么就得让Java类要被Java虚拟机加载.Java类如 ...

  9. k8s-dashboard的部署与卸载

    相对于枯燥的命令行管理,控制台的管理方式相对就显得更加直观便捷了,虽然官方的dashboard有点不太好用,但是作为免费的dashaboard还是可以体验一番的,下面开始部署这个难用的dashboar ...

  10. JS刷算法题：二叉树

    Q1.翻转二叉树(easy) 如题所示 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 来源:力扣(LeetCode) ...