99
CSS 有趣的邊框
今天看到一篇文章，是利用CSS邊框來做折紙效果，感覺很有意思，於是就對CSS的border研究了一下，發現還真有一些好玩的用法。
1.border折紙效果
首先是HTML代碼，為了簡單，就一個div:
<div > 折紙效果 </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.升級到CSS3
CSS3中增加了圖片邊框border-image,圓角border-raduis,多顏色邊框border-color。圓角用的比較多，多顏色邊框可以做到邊框顏色漸變效果（目前隻有FF30支持，兼容性不好），border-image效果很讚，能九宮格切分圖片，做到邊框尺寸自適應，學習參考：https://www.w3school.com.cn/cssref/pr_border-image.asp
總結：平時布局的時候都有一個常用的寫法，但是還有很多屬性值我們沒有用到，去發掘一下的話可能會有意想不到的驚喜！大家要是還有邊框的有趣玩法，歡迎分享~~
最後更新：2017-04-03 05:39:47