border属性用于设置元素边框，1. 可用border简写定义宽度、样式、颜色，如border: 2px solid #000；2. 也可拆分为border-width、border-style、border-color单独设置；3. 还能通过border-top等方向属性分别控制四边；4. 后续规则会覆盖前面设置，注意必须定义样式否则边框不显示。
在CSS中，border 属性用于设置元素的边框，可以通过控制边框的宽度、样式和颜色来实现丰富的视觉效果。边框的设置可以针对四条边统一操作，也可以单独设置某一条边。
1. 使用 border 简写属性
最常用的方式是使用 border 简写属性，一次性定义边框的宽度、样式和颜色，三者顺序任意，但推荐按“宽度 样式 颜色”书写：
border: 2px solid #000;这条规则表示：边框宽度为2像素，实线样式，黑色。
2. 单独设置边框属性
你也可以将边框拆分为三个独立属性，分别控制：
立即学习“前端免费学习笔记（深入）”；
-
border-width：设置边框的宽度，可使用像素（px）、em、pt等单位，也可用
thin、medium、thick -
border-style：设置边框的样式，常见取值有：
-
solid：实线 -
dashed：虚线 -
dotted：点线 -
double：双线 -
none或hidden：无边框
-
- border-color：设置边框颜色，支持十六进制、RGB、HSL、颜色名称等格式
示例：
border-width: 3px;
border-style: dashed;
border-color: red;
3. 分别设置四条边
如果需要对上、右、下、左边框分别设置，可以使用方向性属性：
- border-top、border-right、border-bottom、border-left
每个都可以使用简写或单独属性：
border-top: 1px solid blue;border-left: 5px dotted green;
4. 设置不同边的不同样式
有时需要四边样式各异，可以直接组合设置：
border: 2px solid #333;border-top-style: dotted;
border-right-width: 5px;
后续规则会覆盖前面的设置。
基本上就这些。掌握 border 的宽度、样式和颜色设置，就能灵活控制元素外观，让页面更有层次感。不复杂但容易忽略细节，比如忘记设置 border-style 会导致边框不显示——即使设置了宽度和颜色。
