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. Faster Rcnn随笔

    步骤:1.build_head()函数: 构建CNN基层网络图像被缩放16倍2.build_rpn()函数: 在feature map上生成box的坐标和判断是否有物体 generate_anchor ...

  2. TensorFlow——学习率衰减的使用方法

    在TensorFlow的优化器中, 都要设置学习率.学习率是在精度和速度之间找到一个平衡: 学习率太大,训练的速度会有提升,但是结果的精度不够,而且还可能导致不能收敛出现震荡的情况. 学习率太小,精度 ...

  3. MySQL快速回顾：高级查询操作

    8.1 排序数据 检索出的数据并不是以纯粹的随机顺序显示的.如果不排序,数据一般将以它在底层表中出现的顺序显示.这可以是数据最初添加到表中的顺序.但是,如果数据后来进行过更新或删除,则此顺序将会受到M ...

  4. k8s~为服务添加ingress的实现

    为服务添加ingress的实现 1 当我们为指定的项目添加ingress支持之后,它会在“负载均衡”标签页出现,并显示出你的域名解析到的服务. 2 我们的ingress是支持https的,所以需要为你 ...

  5. Akka Java 文档 -- 容错

    [转自: http://blog.csdn.net/zjw10wei321/article/details/46911825] 容错 实际中的故障处理 容错案例图解 容错案例所有源码 创建新的监管策略 ...

  6. 01-web自动化基础篇

    1.搭建环境 需要的环境 浏览器(Firefox/Chrome/IE…)-----选择Chrome Python Selenium Selenium IDE(如果用Firefox) FireBug.F ...

  7. 添加学生信息（Javaweb）

    add.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  8. Java入门 - 语言基础 - 09.循环结构

    原文地址:http://www.work100.net/training/java-loop.html 更多教程:光束云 - 免费课程 循环结构 序号 文内章节 视频 1 概述 2 while循环 3 ...

  9. 基于JS实现归并排序算法

    /*********************************************JS归并排序************************************************ ...

  10. Codeforces Round #615 (Div. 3)

    A. Collecting Coins 题目链接:https://codeforces.com/contest/1294/problem/A 题意: 你有三个姐妹她们分别有 a , b , c枚硬币, ...