超级好用的jQuery圆角插件Corner速成

作者：白日做梦家_ | 来源：互联网 | 2022-06-30 14:06

jQuery Corner是一款jQuery的插件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进

jQuery Corner是一款jQuery的插件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进。现在项目放在github上，当然为了方便，本文会以附件的形式提供该插件，但要想得到最新版，请到项目的github上拿。
之所以会像变魔术一样地展现圆角及其他样式，是由于该插件为目标元素增加了一些小条块，这些小条块为背景色，所以人眼看上去出现了圆角而已，其实就是小东西遮盖了本来的直角。

看来我真不是干魔术师的料，一上来就先把老底给揭了出来。不急，我再补充一下，这个魔术的一些要求：

1、插件专为block元素编写，所以div、p等均适用；而inline的元素则没有那么幸运了，当然也不是说inline根本不能用，只是面对为span增加corner要多费点神。不过，正常人不会和span的圆角较劲吧，把span改成div得了。
2、对于插件新增的border-radius功能，IE<=8全体不支持，除了IE外全体浏览器都支持。娘的，再对自己国度IE6泛滥的现状深切鄙视一下。

OK，介绍完了基本要点。教大家如何使用，这是重点，但很简单。第一步，构建基本HTML网页和DIV格局，并CSS。

效果如下：

第二步，引入jQuery，和jQuery Corner插件。

就可以得到这个效果：

这里出现了明显的问题，当前在chrome下只有一个角。在IE下也不正常。滴答滴答，时间经过了近半个小时。我终于发现：
应该给有角的Div加一个父Div，否则我自己做的例子中父级为body，而插件自己还要再增加一个Div，就弄乱套了。所以我修改了最初的代码：

但有两句话需要大家注意（原文）：* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode. 所以，尽量老老实实地用Corner样式吧。二、有多种位置可选可以使用top/bottom/left/right/tl/tr/bl/br设置corner出现的具体位置。看图：

比如对于notch而言，想为mydiv的底部增加notch效果，则改写代码如下：

$("#mydiv").corner('bevel bottom');

于是，就只有底部产生notch角了。

三、可自定义角度大小这功能很好，填写个像素值，就能改变角度。试试吧：

$("#mydiv").corner('bevel bottom 50px');

惊奇的图像如下：

神奇吧，呵呵，还有呢。

四、混搭就刚才这个例子，把上边两个角变为圆角，而下方仍然不变。看代码：

$("#mydiv").corner('top 30px').corner('bevel bottom 50px');

没错，就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。

五、边框装饰这是亮点，感谢一个名叫Kevin Scholl的家伙提出的这个建议，不过这的确是一个非常棒的提议。看代码吧：

这图是chrome下的效果，IE下还不一样，夜色很晚了，没时间调试深入发现问题的原因。

写的不少了，其实还有些功能样式没说，剩下的也并不常用，用到的时候大家看英文自学吧。

推荐阅读

chrome
如何压缩网站页面以减少页面加载时间

本文介绍了影响网站打开时间的两个因素，即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法，并推荐了相应的压缩工具。此外，还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]

蜡笔小新 2023-12-09 09:17:00
chrome
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
chrome
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
jar
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
jar
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
jar
jQuery图片预加载+等比例缩放

本文介绍了使用jQuery实现图片预加载和等比例缩放的方法，同时提供了演示和相关代码。该方法可以重置图片的宽度和高度，并使图片在水平和垂直方向上居中显示。 ... [详细]

蜡笔小新 2023-12-09 17:59:12
jar
angular.element使用方法及总结

2019独角兽企业重金招聘Python工程师标准在线查询：http:each.sinaapp.comangularapielement.html使用方法 ... [详细]

蜡笔小新 2023-10-17 19:54:54
config
markdown [软件代理设置]

本文由编程笔记#小编为大家整理，主要介绍了markdown[软件代理设置]相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 18:19:28
config
jQuery :nthchild前有无空格的区别

:nth-child(index)子元素过滤选择器的描述是：选取每个父元素下的弟index个子元素，index从1开始。然后，我写了如下h ... [详细]

蜡笔小新 2023-10-17 17:10:18
byte
EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析

本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程，并分析了其所需的资源容量。通过解决错误提示和调整内存大小，成功存储了波形数据。然后，讨论了储存环逐束团信号的意义，以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大，每天需要近250G，一年需要90T。然而，储存环逐束团信号具有重要意义，可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]

蜡笔小新 2023-12-14 17:43:56
import
baresip android编译、运行教程1语音通话

本文介绍了如何在安卓平台上编译和运行baresip android，包括下载相关的sdk和ndk，修改ndk路径和输出目录，以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]

蜡笔小新 2023-12-14 10:53:48
import
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
import
推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]

蜡笔小新 2023-12-13 19:35:25
import
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
import
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43

白日做梦家_

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章