边框的基础

3、边框 border

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

3.1、border-width边框宽度

• 作用

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

• 取值

  • 长度值

  • 不允许指定负长度值。

• 语法

  • 空格隔开1-4个值

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

    • 2个值 设置上下、左右

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

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

3.2、border-style边框样式

• 作用

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

• 取值

  • none 定义无边框。

  • dotted 定义点状边框。

  • dashed 定义虚线。

  • solid 定义实线。

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

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

• 语法

  • 1个值 设置所有边框

  • 2个值 设置上下、左右

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

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

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

3.3、border-color边框颜色

• 作用

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

• 取值

  • 颜色的名称，如 red

  • RGB 值， 如 rgb(255,0,0)

  • 16进制值，如 #ff0000

• 语法

  • 1个值 设置所有边框

  • 2个值 设置上下、左右

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

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

3.4、边框实例

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

3.5、简写

定义四个边

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

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

单个方向定义

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