本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
在css中，对 border 属性的使用是非常多的，一般在使用是直接简写，没有对其属性进行更深的探究，在看了 《CSS世界》这本书后发现一些 border 属性的有意思的地方。
来一波常规操作
平时在给元素添加border时直接是 border: 1px solid red 一把梭，例如以下：
.box{
width: 200px;
height: 100px;
border: 5px solid red;
}
没错，这就是常规操作，5个像素的边框宽度，实线，红色边框颜色。
再来一波非常规操作
代码如下：
.box{
width: 200px;
height: 100px;
border: solid;
}
咦，这是啥操作？带着满脸疑惑打开了css参考手册，里面说到 border 可以为 border-width、border-style、border-color 三个属性（按顺序）的简写，还提到：“如果不设置其中的某个值，也不会出问题”，border-width 属性的默认值为 medium，因此可以得到 border: solid 是 border: medium solid black 的一种简写。其中 medium 作为默认值，具体大小是多少？black 为啥会作为边框的默认颜色而不是其他颜色？带着这些问题继续往下:
问题一：border: 3px; 可以生效吗？
不会显示元素。
问题二：border: black; 可以生效吗？
一样没效果，不仅是单个元素，测试只设置大小和颜色也不会生效，必须得有 border-style 属性边框才生效。
问题三：为什么是 3px，默认颜色为啥是黑色？
回到最开始，设置 border: solid 时，通过审查元素可以看到元素的边框大小为 3px，即 medium 的值为 3px，为啥是 3个像素大小，看下面栗子：
.box{
width: 200px;
height: 100px;
border: double;
}
边框为双线，大小也为 3px，可以看到双线每一根线的大小为 1px，加上中间的间隙为1px，所以 medium 的大小为 3 像素，即为边框的默认大小。再看一个栗子：
.box{
width: 200px;
height: 100px;
border: solid;
color: hotpink;
}
根据上面的例子可以得出：边框颜色默认渲染字体颜色，字体颜色默认是渲染为黑色的，所以边框的默认颜色为黑色。
总之，要想设置的border生效，必须有的属性是 border-style
除此之外，border 还可以用于实现三角形（面试可能会问到）
.box{
width: 0;
height: 0;
border: 50px solid;
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
还可以结合 transform 的一些属性来实现三角的旋转平移等效果。
以上就是对 border 属性的理解，有不对的地方希望能够指出，谢谢！！！
