CSS 有趣的邊框

標籤：css效果 border web

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

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

<div class="note">摺紙效果</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效果了有木有！我們繼續把邊框設粗，然後把容器的height設為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;}

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

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

note還是原來的note，只是給note加了一個before虛擬元素，設定虛擬元素寬度為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 中 border的屬性：

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

有興趣的可以試一下，另外如果用CSS3的話，可以做出更炫酷的效果，明天再研究....

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