CSS 有趣的邊框

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

1.折紙效果

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

	折紙效果

然后我們?yōu)樗由线吙蛐Ч?/p>

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

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

果然邊框太細(xì)了看不到細(xì)節(jié)，我們把邊框設(shè)粗一點(diǎn)，然后把每個(gè)方向的邊框顏色改一下：

.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;
}

效果如下：

瞬間產(chǎn)生3D效果了有木有！我們繼續(xù)把邊框設(shè)粗，然后把容器的設(shè)為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;
}

瞬間產(chǎn)生信封的效果了有木有！我們繼續(xù)把也設(shè)為0，效果像這樣（代碼就不貼了）：

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

note還是原來的note，只是給note加了一個(gè)偽元素，設(shè)置偽元素寬度為0，內(nèi)容為空，利用邊框做出三角形效果，然后通過絕對定位到右上角，最后加上陰影效果就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支持，兼容性不好），-效果很贊，能九宮格切分圖片，做到邊框尺寸自適應(yīng)，學(xué)習(xí)參考：

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