你真的知道web的border属性么?

先来一波常规QAQ吧

新手入门级别都是先画一亩三分地，打下一个带有宽高的江山图，看下面

代码如下：简单 低调 奢华 有效果

没错，这就是我们常规操作，5个像素的边框宽度大小，solide实线边框样式，black黑色边框颜色

再来一波非常规的操作

不需要奢华 只需要简单 以及更低调的操作

代码如下：

快看，这是什么操作

没有边框打下，也没有颜色，这不符合逻辑呀，那~结果为啥子是这样的？

哦~我是谁~我在哪里~我干了什么~为什么是这个情况

深度解析

其实，这一切的一切都是有原因的，因为这里暗含操作border:medium solid black;

medium 代表边框的默认宽度，这里默认是多少呢？大家不妨先猜一猜

solide 就不说了 

black 默认边框颜色，为什么又是默认黑色呢？再猜一下

问题一：border：3px;只是它可以生效么？

然而丝毫没有动摇

问题二：border:black;只是它可以生效么？

骗子，都是骗子，这两个没有效果、、、

问题三：为什么是三个像素，为什么是黑色？

到了放大招的时候了：

一顿操作猛如虎呀，这是、、、

两条线，俗称双线？嗯~

现在明白了么？这里的双线每一根的大小是一个像素，中间间隔在一个像素，加起来就是三个像素啦，为了更好的和实线呼应，实线就是三个像素啦^v^

你以为这就完了么，这个大招是持续性的：

走~

这个颜色，怎么绿了，不是字体颜色么？现在明白了么？

边框颜色默认渲染字体颜色，字体颜色默认渲染是黑色的，所以这里就理所当然的渲染过来啦。

欢迎同学们跟我一起深入探讨你所不知道的前端哦，赶紧加入我们吧