CSS3教程:邊框?qū)傩詁order的極致應(yīng)用
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:37:05 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用，這些應(yīng)用雖說(shuō)有些劍走偏門，但在一些特殊的場(chǎng)合，可能還是會(huì)用得上的，如果你對(duì)HTML代碼有潔癖，有切膚之痛，并且認(rèn)為冗余的標(biāo)簽影響到你的視覺(jué)神經(jīng)，那么你可以權(quán)當(dāng)一種
這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用，這些應(yīng)用雖說(shuō)有些劍走偏門，但在一些特殊的場(chǎng)合，可能還是會(huì)用得上的，如果你對(duì)HTML代碼有潔癖，有切膚之痛，并且認(rèn)為冗余的標(biāo)簽影響到你的視覺(jué)神經(jīng)，那么你可以權(quán)當(dāng)一種業(yè)余欣賞。
作者：冰極峰
博客地址：http://www.cnblogs.com/binyong
這世界太瘋狂，Border屬性也搞模仿秀！
這里討論的都是關(guān)于邊框?qū)傩詁order的極致應(yīng)用，這些應(yīng)用雖說(shuō)有些劍走偏門，但在一些特殊的場(chǎng)合，可能還是會(huì)用得上的，如果你對(duì)HTML代碼有潔癖，有切膚之痛，并且認(rèn)為冗余的標(biāo)簽影響到你的視覺(jué)神經(jīng)，那么你可以權(quán)當(dāng)一種業(yè)余欣賞。
下面這個(gè)截圖是border屬性的幾種基本變化，通過(guò)對(duì)這幾種基本變化的延伸引用，你可以變化出各種豐富的案例出來(lái)：
圖一
如我在另一篇文章《用div css模擬表格對(duì)角線》中說(shuō)到的一樣，這些變化其實(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是用來(lái)透明的，并且要設(shè)置的線條的樣式為dotted(點(diǎn)線)。寬高為0，就會(huì)只顯示邊框部分，然后用overflow來(lái)將多余部分截取掉，剩下的就是斜角內(nèi)容了。
斜角的組合規(guī)律如下：
-
border-left和border-top組成從左上到右下的斜線
border-right和border-top組成從右上到左下的斜線
border-right和border-bottom組成從右下到左上的斜線
border-left和border-bottom組成從左下到右上的斜線
有了這些基本規(guī)律就可以變化無(wú)窮了，發(fā)揮你的想像力吧，我們來(lái)看看有些什么變化。
下圖是應(yīng)用這種原理變化出來(lái)的不規(guī)則選項(xiàng)卡，為了簡(jiǎn)少代碼量，我沒(méi)有加上js功能，你們可以自己試試。
PS：這些鏈接全部有翻滾狀態(tài)，你可直接使用，已經(jīng)做了兼容性測(cè)試。
圖二
相關(guān)文章
CSS3 flex布局之快速實(shí)現(xiàn)BorderLayout布局
所謂的布局管理器分為好多種，最常見(jiàn)的有流式布局管理器（FlowLayout）、邊界布局管理器（BorderLayout）和表格布局管理器（GridLayout）。本文給大家介紹CSS3 flex布局之2015-12-03- css3中新增了一個(gè)屬性 border-image ，這個(gè)屬性允許開(kāi)發(fā)者使用圖片來(lái)定義邊框,擴(kuò)充了 CSS2 中僅有的幾個(gè)預(yù)定義邊框樣式(border-style)。本文給大家介紹css3 border-image邊2015-11-24
實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18- 這篇文章主要介紹了詳解CSS3中border-image的使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角，并附上示例代碼，推薦給有相同需求的小伙伴。2014-12-22
CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果?，F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28CSS3 border-image詳解、應(yīng)用及jQuery插件
border-image可以說(shuō)是CSS3中的一員大將，將來(lái)一定會(huì)大放光彩，其應(yīng)用潛力真的是非常的驚人。可惜目前支持的瀏覽器有限，僅Firefox3.5，chrome瀏覽器，Safari3+支持border-i2011-08-29深入淺出CSS3 background-clip,background-origin和border-image教程
最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔2011-01-27- css3_快速弄明白border-image2010-06-23
CSS3教程(3):border-color網(wǎng)頁(yè)邊框色彩
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：現(xiàn)在我們來(lái)看一看如何為邊框的border-color添加更多的色彩。 現(xiàn)在我們來(lái)看一看如何為邊框的border-color添加更多的色彩。 上一2009-04-02