欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3教程:邊框?qū)傩詁order的極致應(yīng)用

互聯(lián)網(wǎng)   發(fā)布時(shí)間:2009-04-02 19:37:05   作者:佚名   我要評論
網(wǎng)頁制作Webjx文章簡介:這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用,這些應(yīng)用雖說有些劍走偏門,但在一些特殊的場合,可能還是會用得上的,如果你對HTML代碼有潔癖,有切膚之痛,并且認(rèn)為冗余的標(biāo)簽影響到你的視覺神經(jīng),那么你可以權(quán)當(dāng)一種

這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用,這些應(yīng)用雖說有些劍走偏門,但在一些特殊的場合,可能還是會用得上的,如果你對HTML代碼有潔癖,有切膚之痛,并且認(rèn)為冗余的標(biāo)簽影響到你的視覺神經(jīng),那么你可以權(quán)當(dāng)一種業(yè)余欣賞。
作者:冰極峰
博客地址:http://www.cnblogs.com/binyong
這世界太瘋狂,Border屬性也搞模仿秀!
這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用,這些應(yīng)用雖說有些劍走偏門,但在一些特殊的場合,可能還是會用得上的,如果你對HTML代碼有潔癖,有切膚之痛,并且認(rèn)為冗余的標(biāo)簽影響到你的視覺神經(jīng),那么你可以權(quán)當(dāng)一種業(yè)余欣賞。
下面這個(gè)截圖是border屬性的幾種基本變化,通過對這幾種基本變化的延伸引用,你可以變化出各種豐富的案例出來:

圖一
如我在另一篇文章《用div css模擬表格對角線》中說到的一樣,這些變化其實(shí)就是基于如下的基本原理:
border-left:20px transparent dotted;
border-top:20px green solid;
border-right:20px transparent dotted;
border-bottom:20px orange solid;
width:0px;
height:0px;
overflow:hidden;

注意:transparent是用來透明的,并且要設(shè)置的線條的樣式為dotted(點(diǎn)線)。寬高為0,就會只顯示邊框部分,然后用overflow來將多余部分截取掉,剩下的就是斜角內(nèi)容了。
斜角的組合規(guī)律如下:
    border-left和border-top組成從左上到右下的斜線 border-right和border-top組成從右上到左下的斜線 border-right和border-bottom組成從右下到左上的斜線 border-left和border-bottom組成從左下到右上的斜線

有了這些基本規(guī)律就可以變化無窮了,發(fā)揮你的想像力吧,我們來看看有些什么變化。
下圖是應(yīng)用這種原理變化出來的不規(guī)則選項(xiàng)卡,為了簡少代碼量,我沒有加上js功能,你們可以自己試試。
PS:這些鏈接全部有翻滾狀態(tài),你可直接使用,已經(jīng)做了兼容性測試。

圖二
#p#
這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用,這些應(yīng)用雖說有些劍走偏門,但在一些特殊的場合,可能還是會用得上的,如果你對HTML代碼有潔癖,有切膚之痛,并且認(rèn)為冗余的標(biāo)簽影響到你的視覺神經(jīng),那么你可以權(quán)當(dāng)一種業(yè)余欣賞。
滑動塊也是經(jīng)??吹降?,下面的截圖二中模仿了一個(gè)時(shí)間滑動塊功能,當(dāng)然你還可以發(fā)揮的想像力,將一個(gè)滾動條也用這種方式作出來。在本圖的右上角有兩個(gè)相反的三角形,這種在一些需要折疊的面板中經(jīng)常見,這個(gè)也是用Border模仿出來的。

圖三
下面這兩個(gè)東東我也不知道該將它取個(gè)什么名字,你可以叫它電話撥盤,可能現(xiàn)在只會在很早之前的電影中才能看了。我暫時(shí)將它取名為幸運(yùn)轉(zhuǎn)輪吧! :)
這種你可以將它用在登錄頁面中去。隨你吧?。?br />PS:這里面的每個(gè)形狀都是可以點(diǎn)擊的,你可將它做成一個(gè)鏈接地址。

圖四
下面這種就是一種變態(tài)的做法了,本來我想模仿成五角星,結(jié)果歪打正著,成了這么一種形狀。暫時(shí)就這樣吧。我數(shù)學(xué)不好,關(guān)于五邊形的算法不知如何計(jì)算,望知道的朋友交流一下。

圖五
兼容性測試,在以下幾種瀏覽器中正常工作:
IE6、IE7、FF3、Opera 9.63、傲游
直接下載看吧:
運(yùn)行代碼框

[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]

相關(guān)文章

最新評論