CSS-综合样式属性，边框样式属性的用法详解

border 样式属性用于设置元素的边框，属于综合属性，可以单独设置边框的某一类样式也可以进行综合设置

边框的样式组成：

• border-width 设置边框粗细；常用的属性值为像素（px）

• border-style 设置边框线型

  属性值	描述
  solid	实线
  dashed	虚线
  dotted	点状线

• border-color 设置边框颜色；属性值可以是 颜色单词（red、purple等）、十六进制颜色值（#fff、#ff0000 等）、rgb(255,255,255)；默认值为 transparent（透明），如果不设置边框颜色的在浏览器中默认显示为黑色边框，是因为继承了 html 默认的 color 属性值为：rgb(0, 0, 0)

通过 border-width、border-style、border-color 都是统一设置元素的四条边框的样式，无法单独设置某一条边框

边框简写：

上述边框样式可以进行简写（综合设置）

语法：

border: border-width border-style border-color;

示例：

border: 1px solid #f00;

单独设置某一条边框：

样式属性：

• border-top 上边框
• border-right 右侧边框
• border-bottom 底部边框
• border-left 左侧边框

这些属性都是综合属性，需要设置 border-widht、border-style 和 border-color

示例：

border-right: 2px dashed red;

如果想要单独设置某条边框的粗细、样式或颜色，还可以进行细分；不过实际开发中用的不多

以上边框为例，样式属性有：

• border-top-width 上边框的边框粗细
• border-top-style 上边框的边框样式
• border-top-color 上边框的边框颜色