web border边框

### 边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。

#### 1、border-width边框宽度

- 作用

  设置所有边框宽度，或者单独地为各边边框设置宽度。

- 取值

  - 长度值

  - 不允许指定负长度值。

- 语法

  - 空格隔开1-4个值

    - 1个值 设置所有边框宽度

    - 2个值 设置上下、左右

    - 3个值 设置上、左右、下

    - 4个值 设置上、右、下、左

    #### 2、border-style边框样式

- 作用

  设置标签所有边框的样式，或者单独地为各边设置边框样式。

- 取值

  - none 定义无边框。

  - dotted 定义点状边框。

  - dashed 定义虚线。

  - solid 定义实线。

  - double 定义双线。双线的 宽度等于 border-width 的值。

  - 其他（了解——掌握以上5个即可）

  - 语法

  -  1个值 设置所有边框

  -  2个值 设置上下、左右

  -  3个值 设置上、左右、下

  -  4个值 设置上、右、下、左

- 注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0。

#### 3、border-color边框颜色

- 作用

  设置所有边框颜色，或者单独地为各边边框设置颜色。

- 取值

  -  颜色的名称，如 `red`

  -  RGB 值， 如 `rgb(255,0,0)`

  -  16进制值，如 `#ff0000`

- 语法

  - 1个值 设置所有边框

  - 2个值 设置上下、左右

  - 3个值 设置上、左右、下

  - 4个值 设置上、右、下、左

  #### 5、简写

 **定义四个边**

 语法：border:样式 宽度 颜色；

```css

  .box{

      width:100px;

      height:100px;

     /* 四个边简写 */            

      border:10px solid red;      

 }

```

**单个方向定义**

说明：每个边框都可以设置样式宽度颜色。

语法：border-方向：宽度 样式 颜色；

**拆分语法**

- border-方向-width

- border-方向-color

- border-方向-style

```css

.box{

            /* 单个边简写 */

            border-left:10px solid red;

            border-right:10px solid green;

            border-top:10px solid pink;

            /* border-bottom:10px solid red; */

            /* 单个边拆分的写法 */

            border-bottom-width:10px;

            border-bottom-style:solid;

            border-bottom-color:yellow;

}

```

**注意:**

- 边框会影响盒子实际大小

- 边框样式、边框宽度、边框颜色无书写顺序要求