CSS - 设置边框 设置边框的宽度，类型，颜色，复合写法，设置边框是否占据额外的空间

1.设置边框的宽度

/*同时设置上下左右边框*/
border-width: 2px;

/*设置上下 左右 边框*/
border-width: 2px 2px;

/*设置上 左右 下 边框*/
border-width: 2px 1px 2px;

/*设置 上 下 左 右 边框*/
border-width: 2px 2px 2px 2px;

2.设置边框的类型

4种不同的写法分别定义上下左右边框与定义边框的宽度差不多

border-style: solid;

none 默认值，solid 实线，dashed 虚线，dotted 点状边框，double 双线 双线的宽度等于 border-width 的值

3.设置边框的颜色

4种不同的写法分别定义上下左右边框与定义边框的宽度差不多

border-color: red;

border-color: rgb(124,176,28);

border-color: rgba(124,176,28,0.5);

4.复合写法

border：宽度 类型 颜色

5.边框是否占据额外的空间

默认情况下(content-box)，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

box-sizing: content-box;

属性值 content-box 边框占据额外空间，border-box 边距不占据额外空间 占据盒子的空间