2.边框border

border-style边框样式

有很多种边框样式，但是最常用的有三种：solid实线边框，dashed虚线边框，dotted点线边框
none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
hidden： 隐藏边框。
dotted： 点状轮廓。 （常用）
dashed： 虚线轮廓。 （常用）
solid： 实线轮廓 （常用）
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。
简单示例：

div {
  border-width: 5px;
  border-style: solid;
  border-color: red
}

border复合写法(简写)

可以将三个参数用border属性写成一行，即合并为一个属性，border的简写中属性不分顺序，同上例：

div {
  //不分顺序
  border: 5px solid red
}

简写注意点

如果使用了简写后再去覆写border属性，则会覆盖原本所有的设置，而不是只覆盖冲突的部分，因为border复合写法算作一个属性而不是三个属性：

div {
  border: 5px dashed red;
   /*覆写border后会覆盖所有的属性，所以最终的属性为实线绿色，而不是5px虚线绿色*/
  border: green
}

注意点，灵活设置

所有的边框属性都可以指定改变上下左右的特定边框，而不是对所有边框生效。并且上下左右的边框是以斜切角衔接的。语法为 border-。
*简单示例：

 div {
    width: 300px;
    height: 200px;
    border: 10px solid blue;
    border-top: 5px solid pink;
    border-bottom: 15px solid #000;
    border-right-color: gray;
    border-left-width: 10px;
  }