Auto-Ready!

一、可用的模式

默認的圓角樣式表現round

Round

$(this).corner();

Bevel

$(this).corner("bevel");

Notch

$(this).corner("notch");

Bite

$(this).corner("bite");

Cool

$(this).corner("cool");

Sharp

$(this).corner("sharp");

Slide

$(this).corner("slide");

Jut

$(this).corner("jut");

Curl

$(this).corner("curl");

Tear

$(this).corner("tear");

Fray

$(this).corner("fray");

Wicked

$(this).corner("wicked");

Sculpt

$(this).corner("sculpt");

Long

$(this).corner("long");

Dog Ear

$(this).corner("dog");

Dog2

$(this).corner("dog2");

Dog3

$(this).corner("dog3");

二、選擇你的那個角

使用top, bottom, left, right, tl, tr, bl, br 指定上下左右到底哪個角有樣式

Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Left Notch

$(this).corner("notch left");

Top-Right Dog Ear

$(this).corner("dog tr");

Top-Left, Bottom-Right Cool

$(this).corner("cool tl br");

三、特定的大小

可以使用px為單位的值來指定圓角的大小

Round 30px

$(this).corner("30px");

Round 5px

$(this).corner("5px");

Cool 20px

$(this).corner("cool 20px");

Sharp 20px

$(this).corner("sharp 20px");

Bite 30px

$(this).corner("bite 30px");

Wicked 20px

$(this).corner("wicked 20px");

Dog 20px

$(this).corner("dog 20px");

Dog2 30px

$(this).corner("dog2 30px");

Dog3 30px

$(this).corner("dog3 30px");

四、混合及匹配

使用corner鏈實現效果的合并

Round and Bevel

$(this).corner( "bottom").corner("top bevel");

Round and Notch

$(this).corner( "br top").corner("notch bl 20px");

Crazy

$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");

五、裝飾

使用嵌套的圓角元素實現效果(多虧了Kevin Scholl)

Round

$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Round

$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")

Round

$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '10px').corner("bevel 14px")

Bite

$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")

Bite

$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")

Fray

$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")

Tear

$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")

Notch

$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")

Notch

$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")

Sharp

$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")

Cool

$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")

Bite/Round

$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")

Round/Bite

$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")

Fray/Tear

$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")

Jut/Sculpt

$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")

Bevel/Notch

$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")

Notch/Bite

$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")

Bite/Notch

$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")

Curl/Long

$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")

六、選取您自己的顏色(或是保留您的邊框)

默認情況下，角背景是透明的，內容背景使用的是父元素留下的背景色。如果這些不是您想要的，您可以執行您希望的顏色。

corner color: cc:#xxx

strip color: sc:#xxx

keep borders: keep

normal corners

$(this).corner();

colored corners

$(this).corner("cc:#34538b");

colored strips

$(this).corner("sc:#34538b");

"keep" border

$(this).corner("keep");

cc:#34538b notch

$(this).corner("cc:#34538b notch");

cc:#34538b keep notch

$(this).corner("keep notch cc:#34538b");

cc:#34538b keep bite

$(this).corner("bite keep 15px cc:#34538b");

cc:#34538b cool keep

$(this).corner("cc:#34538b cool keep 20px");

七、有趣的填充

有趣的邊緣填充效果

左半邊

$(this).corner("sharp tr br 20px");

右半邊

$(this).corner("sharp tl bl 20px");

八、固定的還是流動的？都沒問題！

下面的div標簽們的高度或寬度要么固定，要么流動的(自適應)，自由搭配。

高度: 自適應

寬度: 自適應

網站新首頁已于2010-01-06 零點十分上線了。全是自己設計開發的，歡迎測試，歡迎提建議。

高度: 固定

寬度: 自適應

網站新首頁已于2010-01-06 零點十分上線了。全是自己設計開發的，歡迎測試，歡迎提建議。注冊后還有用戶應用系統，開發的幾個簡單的功能，歡迎注冊，歡迎使用。

高度: 自適應

寬度: 固定

網站新首頁已于2010-01-06 零點十分上線了。全是自己設計開發的，歡迎測試，歡迎提建議。注冊后還有用戶應用系統，開發的幾個簡單的功能，歡迎注冊，歡迎使用。

注冊地址：/php/regist.php

高度: 固定

寬度: 固定

網站新首頁已于2010-01-06 零點十分上線了。全是自己設計開發的，歡迎測試，歡迎提建議。注冊后還有用戶應用系統，開發的幾個簡單的功能，歡迎注冊，歡迎使用。

九、普通的樣式

下面的div用以測試只有樣式顯示的內容自適應的元素的表現。

圓角

這是一個有 30px padding樣式的普通div

圓角

這是一個有 0px padding樣式的普通div

圓角

這個普通的div 有一個 30px padding 和 30px margin的樣式

去除圓角

下面顯示的是動態的改變元素為圓角或不是圓角

// 使用的腳本

...

$('#dynamic').corner();

...

$('#dynamic').uncorner();

圓角 無圓角

無圓角演示

此div的id是#dynamic

十、使用元數據標記代替參數選項

下面示例演示了如果將corner參數用自定義的元數據標記代替。corner

// 標記

元數據實例

// 腳本 - corner函數沒有任何參數

$('.myCorner').corner();

元數據實例

總結

以上是生活随笔為你收集整理的html怎么引入圆角插件,jQuery圆角插件demo页面 张鑫旭-鑫空间-鑫生活的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。