今天做了一個(gè)小小的demo是基于jq和css3的一個(gè)圖片的折角和遮罩動(dòng)效喝滞。demo里面使用到了border這個(gè)知識(shí)點(diǎn)，因?yàn)閎order是具有可動(dòng)畫性的（就是可以支持過渡等等）尤勋。所以用了border就可以非常方便的做出折角動(dòng)效喘落。這個(gè)的‘靈感’其實(shí)是在看360的前端團(tuán)隊(duì)奇虎的慕課課程時(shí)候，她們講了一個(gè)小小的技巧最冰，就是border才知道border原來也是大有門路在里面瘦棋。在開始之前，我先溫習(xí)了一下border暖哨。
其實(shí)從上面的gif圖有獲取到小小的啟發(fā)呢赌朋。雖然看起來都是三角形，但是其實(shí)都是邊框來著篇裁。為了各位可以看清楚沛慢，特地截了一張靜態(tài)的。
html&css代碼截圖
可以發(fā)現(xiàn)上面的圖之所以會(huì)有黑色的部分达布，都是在基礎(chǔ)的borders類里面寫了一個(gè)
border: 20px solid white;
那如果沒有這句話呢团甲？我重新做了一個(gè)實(shí)驗(yàn)，為了實(shí)驗(yàn)結(jié)果比較明顯黍聂，我給每個(gè)border不同的顏色躺苦。
可以從上圖對(duì)比看出，加入你沒有給出四個(gè)邊框的基礎(chǔ)值产还，也就是沒有這個(gè)邊的邊框的時(shí)候匹厘，那么會(huì)被整個(gè)裁減掉。也就是不會(huì)出現(xiàn)下圖的那種情況雕沉。不清楚集乔？那舉一個(gè)??去件。
可以發(fā)現(xiàn)假如為第一種情況，就是壓根不給你上邊框的情況呢尤溜，整個(gè)矩形都會(huì)被砍掉一半倔叼，屬于上半部分的矩形完全被砍掉；如果是已經(jīng)給出了上邊框宫莱，只是將它設(shè)置為透明丈攒，或者白色的情況呢，左右的兩個(gè)三角形還是會(huì)完全顯示出來授霸。
由此可以得出巡验，一旦不給出某一邊的邊框的話，就會(huì)被砍掉一半碘耳，所以可以發(fā)現(xiàn)显设，如果只給出了對(duì)邊的邊框，其實(shí)給了等于沒給辛辨。因?yàn)榱硗鈨蛇厱?huì)將你砍掉捕捂，比如瑟枫，你給出了上下的邊框，但是不給出左右的邊框指攒，那么左右各被砍掉一半慷妙，就相當(dāng)于沒有了。
其實(shí)這里的‘沒有’并不是真的沒有允悦，只是你看不到而已膝擂。。澡屡。如果你審核元素猿挚，你會(huì)發(fā)現(xiàn)，其實(shí)他是在的驶鹉，只是你看到而已绩蜻。。室埋。（想想有點(diǎn)詭異办绝。不說了，直接上圖姚淆。）
那如果我不給相等寬度的邊框呢降淮？其實(shí)最后你會(huì)發(fā)現(xiàn)結(jié)果是一樣，這就等你們自己試驗(yàn)啦~
border總結(jié)1的demo地址：demo
