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系列七（JIT 即时编译器）.

    一.概述 即时编译器(Just In Time Compiler),也称为 JIT 编译器,它的主要工作是把热点代码编译成与本地平台相关的机器码,并进行各种层次的优化,从而提高代码执行的效率. 那么什 ...

  2. Tarjan强连通分量模板

    最好还是看一看下面这个网址吧 我的这篇博客里的代码更加缜密(毫无错误的神级代码)https://www.cnblogs.com/Tidoblogs/p/11315153.html https://ww ...

  3. Kafka日志压缩剖析

    1.概述 最近有些同学在学习Kafka时,问到Kafka的日志压缩(Log Compaction)问题,对于Kafka的日志压缩有些疑惑,今天笔者就为大家来剖析一下Kafka的日志压缩的相关内容. 2 ...

  4. 树形dp - 求树的直径

    随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好. 现在已经勘探确定了n个位置可 ...

  5. Vue中的nextTick()浅析

    引言 在开发过程中,我们经常遇到这样的问题:我明明已经更新了数据,为什么当我获取某个节点的数据时,却还是更新前的数据? 一,浅析 为什么会这样呢?带着这个疑问先往下看. 先看一个小的例子: <d ...

  6. python requests 库 首次使用

    安装requests库 执行pip3 install requests 使用resquests库获取百度网站首页 打开python idle终端.以python3为例,在终端执行python3并回车. ...

  7. 从0开发3D引擎（七）：学习Reason语言

    目录 上一篇博文 介绍Reason Reason的优势 如何学习Reason? 介绍Reason的部分知识点 大家好,本文介绍Reason语言以及学习Reason的方法. 上一篇博文 从0开发3D引擎 ...

  8. Entity Framework 6+ 连接Mysql

    好吧.这个博客开不开的 我感觉.. 都一样了. 前言: 公司改造Sqlserver ->Mysql Sql2016老夫对不住你啊.. 好 前沿结束. 需要的家伙: 1.mysql-for-vis ...

  9. [bzoj4568] [loj#2013] [Scoi2016] 幸运数字

    Description \(A\) 国共有 \(n\) 座城市,这些城市由 \(n-1\) 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正 ...

  10. 创建模仿存储库 Making a Mock Repository 精通ASP-NET-MVC-5-弗瑞曼 Listing 7-5