CSS 有趣的邊框，CSS有趣邊框

CSS 有趣的邊框，CSS有趣邊框

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

1.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的可選值：

2.升級到CSS3CSS3中增加了圖片邊框border-image,圓角border-raduis,多顏色邊框border-color。圓角用的比較多，多顏色邊框可以做到邊框色彩坡形效果（目前只有FF30支援，相容性不好），border-image效果很贊，能九宮格切分圖片，做到邊框尺寸自適應，學習參考：http://www.w3school.com.cn/cssref/pr_border-image.asp

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

css中給加邊框的問題

有兩種方法;
一是給div設定全部邊框再隱藏上邊框
div{border:1px solid #000; border-top:none;}

二是分別給左右下寫邊框
div{border-left:{1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000;}

要是你三邊的邊框樣式一致的話建議用第一種,不一致的話用第二種,方便單獨設定每個邊框樣式
 
用css添加邊框

<style>
span{display:block; width:500px; height:200px; border:1px solid #00f}
</style>
<span>
歡迎光臨某某某網站
</span>

寬度為500px;高度為200px;邊框線寬為1px；實線；顏色為藍色 ,糾正下span不定義為塊狀三沒法渲染高寬的