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

逃离我推掉我的手 2023-08-17 17:47 152阅读 0赞

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

#### 边框的样式组成： ####

*  `border-width` 设置边框粗细；常用的属性值为像素（px）
 *  `border-style` 设置边框线型
    
    <table> 
     <thead> 
      <tr> 
       <th>属性值</th> 
       <th>描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>solid</td> 
       <td>实线</td> 
      </tr> 
      <tr> 
       <td>dashed</td> 
       <td>虚线</td> 
      </tr> 
      <tr> 
       <td>dotted</td> 
       <td>点状线</td> 
      </tr> 
     </tbody> 
    </table>
 *  `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

示例：