边框 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个值 设置上、右、下、左

4、边框实例

.box{
    width:100px;
    height:100px;
    /* 边框 宽度  上下 左右 */
    /* border-width:1px 10px*/  
    /* 边框 样式 */
    /* border-style:solid dashed double; */
    /* 边框 颜色  上 右 下 左 */
    border-color:red blue green yellow; 
​
}

5、简写

定义四个边

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

  .box{
      width:100px;
      height:100px;
     /* 四个边简写 */            
      border:10px solid red;       
 }

单个方向定义

说明：每个边框都可以设置样式宽度颜色。 语法：border-方向：宽度 样式 颜色；

拆分语法

• border-方向-width

• border-方向-color

• border-方向-style

.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;
}

注意:

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

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