CSS 有趣的邊框

今天看到一篇文章，是利用CSS邊框來做折紙效果，感覺很有意思，于是就對CSS的研究了一下，發現還真有一些好玩的用法。

1.折紙效果

首先是HTML代碼，為了簡單，就一個div:

	折紙效果

然后我們為它加上邊框效果：

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	border:1px solid #000;
}

這是最簡單最丑的邊框效果了，看起來像這樣：

果然邊框太細了看不到細節，我們把邊框設粗一點，然后把每個方向的邊框顏色改一下：

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	border-width:10px 10px 10px 10px;
	border-color:#aa0 #f0f #512 #a21;
	border-style:solid;
}

效果如下：

瞬間產生3D效果了有木有！我們繼續把邊框設粗，然后把容器的設為0：

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:0px;
	background:#ff0;
	border-width:50px;
	border-color:#aa0 #a21 #740 #a21;
	border-style:solid;
}

瞬間產生信封的效果了有木有！我們繼續把也設為0，效果像這樣（代碼就不貼了）：

是不是有一種金字塔的感覺呢！好了，就玩到這里，之前說了做折紙效果，現在想想應該是SO EASY了，先看效果圖：

note還是原來的note，只是給note加了一個偽元素，設置偽元素寬度為0，內容為空，利用邊框做出三角形效果，然后通過絕對定位到右上角，最后加上陰影效果就ok啦。代碼如下：

.note{
	display:block; 
	margin:100px auto;
	width:100px;
	height:100px;
	background:#ff0;
	padding:50px;
	position:relative;
}
.note:before{
	content:"";
	width:0;
	border-color:#fff #fff transparent transparent;
	border-style:solid;
	border-width:20px;
	position:absolute;
	top:0;
	right:0;
	
	-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
        box-shadow:-2px 2px 2px rgba(0,0,0,0.3);
}

原來的HTML代碼完全沒變，只是更改了CSS樣式而已，完全不影響語義化。

另附上CSS 中 的屬性：

另外，-本身也有支持3D效果的屬性，以下是-的可選值：

2.升級到CSS3

CSS3中增加了圖片邊框-,圓角-,多顏色邊框-。圓角用的比較多，多顏色邊框可以做到邊框顏色漸變效果（目前只有FF30支持，兼容性不好），-效果很贊，能九宮格切分圖片，做到邊框尺寸自適應，學習參考：

總結：平時布局的時候都有一個常用的寫法，但是還有很多屬性值我們沒有用到，去發掘一下的話可能會有意想不到的驚喜！大家要是還有邊框的有趣玩法，歡迎分享~~