边框样式

border可以设置元素的边框，边框组成：边框粗细，边框样式，边框颜色

属性	作用
border-width	定义边框粗细，单位 px
border-style	边框的样式（none（无）、solid（实线）、dashed（虚线）、dotted(点线)）
border-color	边框颜色

<!-- border: 边框粗细 边框样式 边框颜色 -->
<!-- 设置四个边框样式 -->
border: 2px solid red;
<!-- 设置顶部边框样式 -->
border-top: 2px dashed pink;

---

表格边框样式

测量盒子的时候不需要测量边框

table,
tr,
th,
td {
    border: 2px solid red;
    /* 合并相邻的边框，只有表格有效，div无效 */
    border-collapse: collapse;
    text-align: center;
}

<table>
    <tr>
        <th>1234567</th>
        <th>1234567</th>
        <th>1234567</th>
    </tr>
    <tr>
        <td>1234567</td>
        <td>1234567</td>
        <td>1234567</td>
    </tr>
    <tr>
        <td>1234567</td>
        <td>1234567</td>
        <td>1234567</td>
    </tr>
</table>

---

圆角边框

设置圆角边框的数值可以是数值，也可以是百分比

当数值为正方形的高度或者宽度时，则为圆

/* 数字越大，该矩形就越圆 */
border-radius: 10px;

/*四个数值分别表示: 左上角 右上角 右下角 左下角 */
border-radius: 10px 12px 14px 16px;

---

盒子阴影

box-shadow: 水平阴影位置(必写) 垂直阴影位置(必写) 模糊效果(可写) 阴影尺寸(可写) 阴影颜色(可写) 内阴影(可写)

box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必写，水平阴影位置，允许负值
v-shadow	必写，垂直阴影位置，允许负值
blur	可选，模糊效果（数值越大越模糊）
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外阴影改为内阴影

/* 外阴影，默认 */
box-shadow: 10px 10px 10px 10px black;

/* 内阴影 */
box-shadow: 10px 10px 10px 10px black inset;

设置外阴影直接默认即可

盒子阴影不会占用空间，所以不会影响网页排版