设置边框需同时定义宽度和样式，border-width 设置粗细，border-style 定义类型如 solid、dashed，二者结合 border-color 可简写为 border 属性，单独设置某边可用 border-top-style 等属性。
在CSS中，设置元素的边框厚度和样式主要通过 border-width 和 border-style 属性来实现。这两个属性可以单独使用，也可以与 border-color 一起配合 border 简写属性统一设置。
设置边框厚度：border-width
border-width 用于定义边框的粗细，可以使用关键词或具体长度值：
- thin：细边框（通常为1px）
- medium：中等边框（默认值，通常为3px）
- thick：粗边框（通常为4px）
- 具体数值，如 2px、0.5em 等
可分别为四条边设置不同宽度：
border-width: 2px 4px 6px 8px; /* 上 右 下 左 */
设置边框样式：border-style
border-style 决定边框的视觉风格，是必须设置的属性，否则边框不会显示。
立即学习“前端免费学习笔记（深入）”；
- solid：实线边框（最常用）
- dashed：虚线边框
- dotted：点状边框
- double：双线边框
- groove、ridge、inset、outset：3D凹凸效果边框
- none 或 hidden：无边框
同样支持分别设置四条边的样式：
border-style: solid dashed dotted double;
综合应用示例
以下是一个完整示例，展示如何组合使用这些属性：
.box {
border-width: 3px;
border-style: dashed;
border-color: #ff6b6b;
}或者使用简写形式更高效：
.box {
border: 3px dashed #ff6b6b;
}单独设置某一边框
若只想设置某一侧边框，可使用如下属性：
- border-top-width / border-top-style
- border-right-width / border-right-style
- border-bottom-width / border-bottom-style
- border-left-width / border-left-style
例如只给元素添加底部虚线边框：
.underline {
border-bottom-width: 2px;
border-bottom-style: dotted;
}基本上就这些。掌握 border-width 和 border-style 的用法，能让你灵活控制元素边框的外观，提升页面视觉表现力。不复杂但容易忽略细节，比如忘记设置 style 会导致边框不显示。
