快捷導(dǎo)航

超級好用的jQuery圓角插件 Corner速成

更新時間：2014年08月31日 15:23:24 投稿：hebedich

雖然圓角頁面很好看，但一直以來都不太好實現(xiàn)，一方面是沒有CSS3，二是都得通過美工切圖切出來角。但這些麻煩事即將過去，就是因為它：jQuery Corner的出現(xiàn)！

jQuery Corner是一款jQuery的插件，最初由Dave Methvin開發(fā)，但后在Malsup同志的協(xié)助下，進行了一些重要的改進?，F(xiàn)在項目放在github上，當(dāng)然為了方便，本文會以附件的形式提供該插件，但要想得到最新版，請到項目的github上拿。
之所以會像變魔術(shù)一樣地展現(xiàn)圓角及其他樣式，是由于該插件為目標(biāo)元素增加了一些小條塊，這些小條塊為背景色，所以人眼看上去出現(xiàn)了圓角而已，其實就是小東西遮蓋了本來的直角。

看來我真不是干魔術(shù)師的料，一上來就先把老底給揭了出來。不急，我再補充一下，這個魔術(shù)的一些要求：

1、插件專為block元素編寫，所以div、p等均適用；而inline的元素則沒有那么幸運了，當(dāng)然也不是說inline根本不能用，只是面對為span增加corner要多費點神。不過，正常人不會和span的圓角較勁吧，把span改成div得了。
2、對于插件新增的border-radius功能，IE<=8全體不支持，除了IE外全體瀏覽器都支持。娘的，再對自己國度IE6泛濫的現(xiàn)狀深切鄙視一下。

OK，介紹完了基本要點。教大家如何使用，這是重點，但很簡單。第一步，構(gòu)建基本HTML網(wǎng)頁和DIV格局，并CSS。

<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>

</html>

效果如下：

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

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

此時，還是剛才圖的效果，直角沒變。
第三步，寫js代碼，讓插件對DIV塊起作用。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("div").corner();

});
</script>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

此時，圓角就出現(xiàn)了。

至此，小功告成。開始拓展拔高啦。

********************************拓展************************************

一、有多種Corner可選

如果你喜歡凹狀，那么上圖第一排，第三列就是好選擇。先認(rèn)識個單詞notch，就是凹槽的意思。只需把一處代碼改成：

<script type="text/javascript">
$(function(){
$("div").corner("notch");

});
</script>

就可以得到這個效果：

這里出現(xiàn)了明顯的問題，當(dāng)前在chrome下只有一個角。在IE下也不正常。滴答滴答，時間經(jīng)過了近半個小時。我終于發(fā)現(xiàn)：
應(yīng)該給有角的Div加一個父Div，否則我自己做的例子中父級為body，而插件自己還要再增加一個Div，就弄亂套了。所以我修改了最初的代碼：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv").corner('bevel');
});
</script>
<style type="text/css">
#mydiv{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"></div>
</div>
</body>
</html>

看圖吧：

但有兩句話需要大家注意（原文）：* 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設(shè)置corner出現(xiàn)的具體位置?？磮D：

比如對于notch而言，想為mydiv的底部增加notch效果，則改寫代碼如下：

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

于是，就只有底部產(chǎn)生notch角了。

三、可自定義角度大小這功能很好，填寫個像素值，就能改變角度。試試吧：

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

驚奇的圖像如下：

神奇吧，呵呵，還有呢。

四、混搭就剛才這個例子，把上邊兩個角變?yōu)閳A角，而下方仍然不變?？创a：

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

沒錯，就是用兩句corner。當(dāng)然你可以完全使用四個corner把各個角都自定義。

五、邊框裝飾這是亮點，感謝一個名叫Kevin Scholl的家伙提出的這個建議，不過這的確是一個非常棒的提議。看代碼吧：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
});
</script>
<style type="text/css">
#mydiv{
width:360px;
background-color: #600;
}
#mydiv p{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"><P></p></div>
</div>
</body>
</html>

就會這樣：