今天做了一個(gè)小小的demo是基于jq和css3的一個(gè)圖片的折角和遮罩動(dòng)效。demo里面使用到了border這個(gè)知識(shí)點(diǎn)，因?yàn)閎order是具有可動(dòng)畫(huà)性的（就是可以支持過(guò)渡等等）。所以用了border就可以非常方便的做出折角動(dòng)效。這個(gè)的‘靈感’其實(shí)是在看360的前端團(tuán)隊(duì)奇虎的慕課課程時(shí)候，她們講了一個(gè)小小的技巧，就是border才知道border原來(lái)也是大有門路在里面。在開(kāi)始之前，我先溫習(xí)了一下border。

邊框gif圖

其實(shí)從上面的gif圖有獲取到小小的啟發(fā)呢。雖然看起來(lái)都是三角形，但是其實(shí)都是邊框來(lái)著。為了各位可以看清楚，特地截了一張靜態(tài)的。

靜態(tài)圖片

html&css代碼截圖

css截圖

html截圖

可以發(fā)現(xiàn)上面的圖之所以會(huì)有黑色的部分，都是在基礎(chǔ)的borders類里面寫(xiě)了一個(gè)

border: 20px solid white;

那如果沒(méi)有這句話呢？我重新做了一個(gè)實(shí)驗(yàn)，為了實(shí)驗(yàn)結(jié)果比較明顯，我給每個(gè)border不同的顏色。

沒(méi)有給出基本的border的時(shí)候

給出的基本的border的情況

可以從上圖對(duì)比看出，加入你沒(méi)有給出四個(gè)邊框的基礎(chǔ)值，也就是沒(méi)有這個(gè)邊的邊框的時(shí)候，那么會(huì)被整個(gè)裁減掉。也就是不會(huì)出現(xiàn)下圖的那種情況。不清楚？那舉一個(gè)??。

只有下邊框和左右邊框的圖

給出了所有邊框，但是只是將下左右顯示出來(lái)的情況

可以發(fā)現(xiàn)假如為第一種情況，就是壓根不給你上邊框的情況呢，整個(gè)矩形都會(huì)被砍掉一半，屬于上半部分的矩形完全被砍掉；如果是已經(jīng)給出了上邊框，只是將它設(shè)置為透明，或者白色的情況呢，左右的兩個(gè)三角形還是會(huì)完全顯示出來(lái)。

由此可以得出，一旦不給出某一邊的邊框的話，就會(huì)被砍掉一半，所以可以發(fā)現(xiàn)，如果只給出了對(duì)邊的邊框，其實(shí)給了等于沒(méi)給。因?yàn)榱硗鈨蛇厱?huì)將你砍掉，比如，你給出了上下的邊框，但是不給出左右的邊框，那么左右各被砍掉一半，就相當(dāng)于沒(méi)有了。

其實(shí)這里的‘沒(méi)有’并不是真的沒(méi)有，只是你看不到而已。。。如果你審核元素，你會(huì)發(fā)現(xiàn)，其實(shí)他是在的，只是你看到而已。。。（想想有點(diǎn)詭異。不說(shuō)了，直接上圖。）

只給出左邊框的盒子模型圖。最外面的是我設(shè)置的margin可以忽略，只要看border就好啦。

那如果我不給相等寬度的邊框呢？其實(shí)最后你會(huì)發(fā)現(xiàn)結(jié)果是一樣，這就等你們自己試驗(yàn)啦~

border總結(jié)1的demo地址：demo