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. Java工作流引擎系统节点接收人设置“其他方式总结”系列讲解

    关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单  拖拽式表单 工作流系统CCBPM节点访问规则接收人规则 适配数据库: o ...

  2. Asp.Net Core 学习教程1、初始.Net Core与VS Code 第一个web程序

    1..Net Core介绍 .NET Core是.NET Framework的新一代版本, 是微软开发的第一个具有跨平台(Windows.Macosx.Linux) 能力的应用程序开发框架,未来也将会 ...

  3. android:整理drawable（shapdrawable）（二）

    前言 bitmapdrawable 与nithpathdrawable 完结,接下来是shapedrawable. shapedrawable是使用频率最高的drawable 可见其重要性. shap ...

  4. 《C# 爬虫 破境之道》：第一境 爬虫原理 — 第一节：整体思路

    在构建本章节内容的时候,笔者也在想一个问题,究竟什么样的采集器框架,才能算得上是一个“全能”的呢?就我自己以往项目经历而言,可以归纳以下几个大的分类: 根据通讯协议:HTTP的.HTTPS的.TCP的 ...

  5. Nginx作为负载均衡服务器——server参数讲解

    upstream举例 upstream backend { server backend1.ecample.com weight = 5; # wwight 代表权重 server backend2. ...

  6. 盘它！！一步到位，Tensorflow 2的实战 ！！LSTM下的股票预测（附详尽代码及数据集）

    关键词:tensorflow2.LSTM.时间序列.股票预测 Tensorflow 2.0发布已经有一段时间了,各种新API的确简单易用,除了官方文档以外能够找到的学习资料也很多,但是大都没有给出实战 ...

  7. Django 数据库连接缓存的坑

    https://www.cnblogs.com/xcsg/p/11446990.html

  8. springboot的yml不显示的原因

    首先排除插件原因 1 安装好插件Ctrl+Alt+S 2 查看修改的application.yml是什么格 在yaml格式中添加*.yaml和*.yml 3 查看maven是否配置完善

  9. 异想家IDEA的偏好配置

    最好将配置文件位置改为软件安装目录下,因为只有自己用,易于便携. 修改bin目录下的idea.properties,注释#去掉修改idea.config.path.idea.system.path配置 ...

  10. [SDOI2010]魔法猪学院（A*，最短路）

    [SDOI2010]魔法猪学院(luogu) Description 题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig ...