超好用的jQuery圆角插件转角

JQuery Corner是JQuery的一个插件，最初是由Dave Methvin开发的，但是在Malsup同志的帮助下，做了一些重要的改进。现在这个项目在github上。当然，为了方便起见，本文将提供插件作为附件，但如果您想获得最新版本，请前往项目的github。圆角等样式之所以像魔法一样显示，是因为插件在目标元素中添加了一些小条，这些小条是背景色，所以圆角会出现在人眼中。事实上，小东西覆盖了原来的直角。

看来我真的不是当魔术师的料。一上来就表现出自信。别担心，让我补充一下这个魔法的一些要求：

1.插件是专门为块元素编写的，所以div和p都适用；内联的元素就没那么幸运了，当然，这并不意味着内联完全不能用，只是在跨度上加角要花更多的功夫。但是正常人是不会和span的圆角竞争的，所以把span改成div。2.插件新增的边框半径功能，除了IE，并不是所有浏览器都支持。妈的，深深鄙视我自己国家IE6泛滥的现状。

好了，基本要点介绍完了。教大家怎么用，这是重点，但很简单。第一步是构建基本的HTML页面和DIV模式以及CSS。

html head style type=' text/CSS ' div { width :350 px；高度：200 px；背景色： # 6af；}/style/head dydiv/div/body/html具有以下效果：

其次，介绍jQuery和jQuery Corner插件。

html head script type=' text/JavaScript ' src=' http :3358 Ajax . googleapis.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/script script type=' text/JavaScript ' src=' http : js/jquery . corner . js '/script style type=' text/CSS ' div { width 3360350 px；高度：200 px；背景色： # 6af；}/style/head dydiv/div/body/html此时依然是上图的效果，直角没有变化。第三步是编写js代码，让插件在DIV块上工作。

html head script type=' text/JavaScript ' src=' http :http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/script script type=' text/JavaScript ' src=' http : js/jquery . corner . js '/script script type=' text/JavaScript ' $(function(){ $(' div ')。corner()；});/script style type=' text/CSS ' div { width :350 px；高度：200 px；背景色： # 6af；}/style/head dydiv/div/body/html此时，圆角出现。

至此，小工作完成。是时候扩展扩展了。

* * * * *

首先，有各种各样的角落可供选择

如果喜欢凹造型，上面第一排第三列都是不错的选择。先认识一个单词notch，意思是groove。只需将一个代码更改为：

脚本类型=' text/JavaScript ' $(function(){ $(' div '))。拐角(‘凹口’)；});/script可以得到这样的效果：

这里有一个明显的问题。目前chrome下只有一个角落。IE下不正常。滴答，时间已经过去了将近半个小时。我终于发现应该给有角度的Div添加一个父Div，否则，我的例子中的父Div就是body，插件本身需要再添加一个Div，这样会把集合搞乱。所以我修改了原始代码：

html head script type=' text/JavaScript ' src=' http :http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/script script type=' text/JavaScript ' src=' http : js/jquery . corner . js '/script script type=' text/JavaScript ' $(function(){ $(' # my div ')。拐角(‘斜面’)；});/script style type=' text/CSS ' # mydiv { width :350 px；高度：200 px；背景色： # 6af；}/style/headsdydivid=' my div '/div/div/body/html看图：

但是有两句话需要注意(原文):*对于以怪癖模式呈现的页面，Internet Explorer中不支持折线。*折叠线仅在互联网资源管理器的顶角支持，不在IE8标准模式下运行。所以，尽量老老实实用转角式。第二，有很多职位可以选择。您可以使用上/下/左/右/TL/tr/bl/br来设置拐角出现的具体位置。看图片：

例如，对于notch，如果您想在mydiv的底部添加notch效果，请按如下方式重写代码：

$('#mydiv ')。拐角(‘斜面底部’)；因此，只有底部会产生缺口角。

第三，可以自定义角度。这个功能非常好。您可以通过填充像素值来更改角度。试试看：

$('#mydiv ')。转角(‘斜面底部50px’)；令人惊叹的图像如下：

很神奇，是吧？还有更多。

4.混搭。就这个例子，把上面两个角变成圆角，而下面一个不变。看看代码：

$('#mydiv ')。拐角('顶部30px ')。转角(‘斜面底部50px’)；没错，就用两句角。当然，你完全可以用四个角来定制每个角。

5.边框装饰这是亮点。感谢一个叫凯文舒尔的人提出了这个建议，但它确实是一个伟大的建议。看看代码：

html head script type=' text/JavaScript ' src=' http :http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 4 . 2/jquery . min . js '/script script type=' text/JavaScript ' src=' http : js/jquery . corner . js '/script script type=' text/JavaScript ' $(function(){ $(' # my div p ')。拐角('圆形8px ')。父项()。css('填充'，' 8px ')。转角('圆形14px ')；});/script style type=' text/CSS ' # mydiv { width :360 px；背景色： # 600；} # mydiv p { width:350px高度：200 px；背景色： # 6af；}/style/headsdydivid=' my div ' p/p/div/div/body/html是这样的：

这张图是chrome下的效果，但IE下不一样。夜深了，没时间调试找出问题原因。我写了很多。其实我还没有说一些功能性的风格，其余的都不常用。当你使用它们时，你可以看英语并自学。