border屬性妙用

標籤：

     以前只知道border屬性是盒模型中的邊框屬性，一直不清楚每個邊的border是矩形拼接有重合呢，還是梯形無縫拼接的。

border梯形

　　為了觀察邊框究竟是哪一種拼接方式，為邊框設定不同的顏色背景，代碼如下：

#content{    width: 100px;    height: 100px;    background: #FFC;    border-top: 80px solid #0F0;    border-right: 80px solid #09C;    border-bottom: 80px solid #9F9;    border-left: 80px solid #FC3;}

　　上面的CSS控制ID屬性為content的div塊的屬性，顯示效果如下：

　　從上面的效果很顯然了，每個邊的border是梯形無縫拼接的，而不是矩形拼接的。

　　那麼我們就可以把另外三個邊框的顏色設定為transparent，這樣就可以得到一個梯形啦！

#content{    width: 200px;    height: 200px;    border-top: 80px solid #0F0;    border-right: 80px solid transparent;    border-bottom: 80px solid transparent;    border-left: 80px solid transparent;}

　　顯示效果如下：

　　那就有疑問了，可不可以通過不定義其他三條邊框來達到只顯示一條邊框的梯形呢？

#content{    width: 200px;    height: 200px;    border-top: 80px solid #0F0;}

　　像上面的代碼，我們期望的是顯示盒模型中的上邊框梯形，但是實際的顯示效果是下面這樣的：

　　是一個矩形！而且矩形的寬就是200px，即我們定義的內容的寬度，奇怪！我們還不相信，於是再換一換瀏覽器試試，然而FF，IE，Chrome都是這樣的。我們可以想到這樣一種解釋，如果邊框不定義，那麼這條邊框就表現為矩形，如果邊框定義，那麼它就表現為梯形。這樣也就可以解釋上面的例子為什麼會出現矩形了。由於左右邊框都沒有定義，所以屬於左右邊框地區的整個矩形都消失了，留下的上邊框自然直剩下一個矩形啦！

border三角形

　　既然可以使用border實現梯形，可不可以實現三角形呢。梯形在上底邊變為0的時候，梯形會退化為三角形，我想你已經有了答案，如果設定content的height和width都為0時，我們就能得到四個三角形：

#content{    width: 0px;    height: 0px;    border-top: 80px solid #0F0;    border-right: 80px solid #09C;    border-bottom: 80px solid #9F9;    border-left: 80px solid #FC3;}

　　我們當然也可以通過設定其他邊的border的背景為transparent實現一個或者2個或者3個三角形咯！

#content{    width: 0px;    height: 0px;    border-top: 80px solid #0F0;    border-right: 80px solid #09C;    border-bottom: 80px solid transparent;    border-left: 80px solid transparent;}

　　當然，如果不定義某些邊的border，不定義的border就會表現為矩形。

#content{    width: 0px;    height: 0px;    border-top: 80px solid #0F0;    border-right: 80px solid #09C;    border-left: 80px solid #FC3;}
/*沒有定義border-bottom的的情況下，下邊border的整個矩形將會消失

　　如果同時沒有定義左右邊框，或者上下邊界的話，就會什麼都不顯示。當然也可以一邊不定義，一邊隱藏，就會有很多種圖形啦。

　　更多的，可以用在表格中畫斜線，多個border疊加，和before，after虛擬元素的結合起來就有很多妙用啦！關鍵是要理解border的具體表現形式。

border屬性妙用