這裡討論的都是關於邊框屬性border的極致應用，這些應用雖說有些劍走偏門，但在一些特殊的場合，可能還是會用得上的，如果你對html**有潔癖，有切膚之痛，並且認為冗餘的標籤影響到你的視覺神經，那麼你可以權當一種業餘欣賞。
作者：冰極峰
部落格位址：
這世界太瘋狂，border屬性也搞模仿秀！
這裡討論的都是關於邊框屬性border的極致應用，這些應用雖說有些劍走偏門，但在一些特殊的場合，可能還是會用得上的，如果你對html**有潔癖，有切膚之痛，並且認為冗餘的標籤影響到你的視覺神經，那麼你可以權當一種業餘欣賞。
下面這個截圖是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來將多餘部分擷取掉，剩下的就是斜角內容了。
斜角的組合規律如下：
border-left和border-top組成從左上到右下的斜線
border-right和border-top組成從右上到左下的斜線
border-right和border-bottom組成從右下到左上的斜線
border-left和border-bottom組成從左下到右上的斜線
有了這些基本規律就可以變化無窮了，發揮你的想像力吧，我們來看看有些什麼變化。
下圖是應用這種原理變化出來的不規則選項卡，為了簡少**量，我沒有加上js功能，你們可以自己試試。
ps：這些鏈結全部有翻滾狀態，你可直接使用，已經做了相容性測試。
圖二
這裡討論的都是關於邊框屬性border的極致應用，這些應用雖說有些劍走偏門，但在一些特殊的場合，可能還是會用得上的，如果你對html**有潔癖，有切膚之痛，並且認為冗餘的標籤影響到你的視覺神經，那麼你可以權當一種業餘欣賞。
滑動塊也是經常看到的，下面的截圖二中模仿了乙個時間滑動塊功能，當然你還可以發揮的想像力，將乙個滾動條也用這種方式作出來。在本圖的右上角有兩個相反的三角形，這種在一些需要摺疊的面板中經常見，這個也是用border模仿出來的。
圖三下面這兩個東東我也不知道該將它取個什麼名字，你可以叫它**撥盤，可能現在只會在很早之前的電影中才能看了。我暫時將它取名為幸運轉輪吧！ ：）
這種你可以將它用在登入頁面中去。隨你吧！！
ps：這裡面的每個形狀都是可以點選的，你可將它做成乙個鏈結位址。
css3邊框新屬性
通過css3，可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...
CSS3的新增邊框屬性
一 css3 新增的邊框屬性 屬性 版本 簡介 border image css3 設定或檢索物件的邊框使用影象來填充 border image source css3 設定或檢索物件的邊框是否用影象定義樣式或影象 路徑 border image slice css3 設定或檢索物件的邊框背景圖的分...
css 科技 邊框 CSS3 邊框
css3 邊框 css3 邊框 通過 css3，您能夠建立圓角邊框，向矩形新增陰影，使用來繪製邊框 並且不需使用設計軟體，比如 photoshop。在本章中，您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...