css-border总结1

今天做了一个小小的demo是基于jq和css3的一个图片的折角和遮罩动效。demo里面使用到了border这个知识点，因为border是具有可动画性的（就是可以支持过渡等等）。所以用了border就可以非常方便的做出折角动效。这个的‘灵感’其实是在看360的前端团队奇虎的慕课课程时候，她们讲了一个小小的技巧，就是border才知道border原来也是大有门路在里面。在开始之前，我先温习了一下border。

边框gif图

其实从上面的gif图有获取到小小的启发呢。虽然看起来都是三角形，但是其实都是边框来着。为了各位可以看清楚，特地截了一张静态的。

静态图片

html&css代码截图

css截图

html截图

可以发现上面的图之所以会有黑色的部分，都是在基础的borders类里面写了一个

border: 20px solid white;

那如果没有这句话呢？我重新做了一个实验，为了实验结果比较明显，我给每个border不同的颜色。

没有给出基本的border的时候

给出的基本的border的情况

可以从上图对比看出，加入你没有给出四个边框的基础值，也就是没有这个边的边框的时候，那么会被整个裁减掉。也就是不会出现下图的那种情况。不清楚？那举一个。

只有下边框和左右边框的图

给出了所有边框，但是只是将下左右显示出来的情况

可以发现假如为第一种情况，就是压根不给你上边框的情况呢，整个矩形都会被砍掉一半，属于上半部分的矩形完全被砍掉；如果是已经给出了上边框，只是将它设置为透明，或者白色的情况呢，左右的两个三角形还是会完全显示出来。

由此可以得出，一旦不给出某一边的边框的话，就会被砍掉一半，所以可以发现，如果只给出了对边的边框，其实给了等于没给。因为另外两边会将你砍掉，比如，你给出了上下的边框，但是不给出左右的边框，那么左右各被砍掉一半，就相当于没有了。

其实这里的‘没有’并不是真的没有，只是你看不到而已。。。如果你审核元素，你会发现，其实他是在的，只是你看到而已。。。（想想有点诡异。不说了，直接上图。）

只给出左边框的盒子模型图。最外面的是我设置的margin可以忽略，只要看border就好啦。

那如果我不给相等宽度的边框呢？其实最后你会发现结果是一样，这就等你们自己试验啦~

---

border总结1的demo地址：demo