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. Numpy的介绍与基本使用方法

    1.什么是Numpy numpy官方文档:https://docs.scipy.org/doc/numpy/reference/?v=20190307135750 NumPy是一个功能强大的Pytho ...

  2. npm 安装出现 run `npm audit fix` to fix them, or `npm audit` for details 解决办法

    1.npm  audit fix 2. npm audit fix --force 3.npm audit 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链 ...

  3. 2.Java程序运行机制

    1.编译型:compile,把所有东西翻译好,若有更新需要重新全部翻译.执行速度够快,对操作系统要求比较低.开发操作系统时用到编译型语言,例如c/c++...运行时需编译整个程序 2.解释性:运行一个 ...

  4. [bzoj3143] [洛谷P3232] [HNOI2013] 游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  5. django cms 5月第一弹

    官方文档: ##http://django-cms.readthedocs.io/en/latest/index.html #截图 #生存的项目结构

  6. python数据类型之字典操作

    Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型.一.创建字典字典由key和value成对组成.基本语法如下: infos = {"name&q ...

  7. Miniio对象储存服务器安装教程

    #创建minio专用文件目录 mkdir -p /app/minio/data mkdir -p /app/minio/config chmod -R 777 /app/minio/data chmo ...

  8. CSS-12-盒子模型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  10. php--->把json传来的stdClass Object类型转array

    php把json传来的stdClass Object类型转array 1.Php中stdClass.object.array的概念 stdClass是PHP的一个基类,即一个空白的类,所有的类几乎都继 ...