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 边距不占据额外空间 占据盒子的空间 

 

6.圆角边框

设置上下左右 border-radius：10px;

设置上左 border-top-left-radius：10px;
设置上右 border-top-right-radius：10px;

设置下左 border-bottom-left-radius：10px;
设置下右 border-bottom-right-radius：10px;设置为圆形 border-radius：50%;

设置为圆角 border-radius：设置为当前盒子高度的一半;