亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

圖一
如我在另一篇文章《用div css模擬表格對角線》中說到的一樣，這些變化其實就是基于如下的基本原理：
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是用來透明的，并且要設置的線條的樣式為dotted(點線)。寬高為0，就會只顯示邊框部分，然后用overflow來將多余部分截取掉，剩下的就是斜角內(nèi)容了。
斜角的組合規(guī)律如下：
    border-left和border-top組成從左上到右下的斜線 border-right和border-top組成從右上到左下的斜線 border-right和border-bottom組成從右下到左上的斜線 border-left和border-bottom組成從左下到右上的斜線

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

圖二

相關(guān)文章

最新評論