CSS之盒子边框

盒子边框（border）

盒子宽： border-left+ padding-left + width + padding-right + border-right

边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
​
solid：边框为单实线(最为常用的)
​
dashed：边框为虚线  
​
dotted：边框为点线
​
double：边框为双实线

<style>
   div{
       width: 100px;
       height: 100px;
       border-width: 1px;
       border-color: deeding;
       border-style: solid; /*边框实线*/ 
       border-style: dashed; /*边框虚线 */
       border:1px red dashed; /*连写 */
       border-top: 1px red solid;       /*上边框，可以用来代替hr水平线*/
       border-bottom: 2px blue dashed; /*下边框*/
       border-left: 1px yellow solid;  /*左*/
       border-right: 2px blue solid;   /*右*/
   }

### 盒子边框写法总结表

|              |                                                              |                                                              |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 设置内容     | 样式属性                                                     | 常用属性值                                                   |
| 上边框       | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; |                                                              |
| 下边框       | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; |                                                              |
| 左边框       | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; |                                                              |
| 右边框       | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; |                                                              |
| 样式综合设置 | border-style:上边 [右边 下边 左边];                          | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边];                          | 像素值                                                       |
| 颜色综合设置 | border-color:上边 [右边 下边 左边];                          | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)                 |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色;                           |                                                              |

```
    border-top: 1px solid red; /*上边框*/
    border-bottom: 2px solid green; /*下边框*/
    border-left: 1px solid blue;
    border-right: 5px solid pink;
    
    border: 1px solid red;
```

### 表格的细线边框