border-style用于定义边框样式，如solid实线、dashed虚线、dotted点状、groove凹槽、ridge脊状、inset内嵌、outset外凸、none无边、hidden隐藏；支持1-4个值的简写，需配合border-width和border-color生效，常用于按钮、输入框、分隔线等UI细节设计。
CSS中的border-style属性用于定义元素边框的外观样式。它能控制边框是实线、虚线还是立体效果等。正确使用border-style可以提升页面的视觉表现力，增强UI设计的细节感。
常见border-style类型说明
solid（实线）：最常用的边框样式，绘制一条连续的实线。适用于大多数需要明确边界的情况，比如按钮、输入框或卡片容器。
dashed（虚线）：由一系列短横线组成，常用于表示可编辑区域、提示框或未激活状态。
dotted（点状线）：以圆点形式呈现边框，视觉上较轻，适合做装饰性边框或强调非正式区域。
立即学习“前端免费学习笔记（深入）”；
groove（凹槽效果）：创建一种向内凹陷的3D效果，边框颜色会根据背景自动调整明暗，模拟光照效果。
ridge（脊状效果）：与groove相反，呈现向外凸起的立体感，也具有3D光照效果。
inset（内嵌效果）：使整个元素看起来“嵌入”页面中，常用于表单控件如文本框，默认状态下有轻微阴影感。
outset（外凸效果）：与inset相对，让元素看起来从页面“突出”，适合按钮按下状态的模拟。
none：无边框，不绘制任何线条。即使设置了宽度和颜色也不会显示。
hidden：与none类似，但在表格边框合并时有特殊处理，通常用于解决边框冲突问题。
border-style的多种写法
该属性支持1到4个值的简写方式，分别对应上、右、下、左四个方向：
- border-style: solid; —— 四边统一为实线
- border-style: dashed dotted; —— 上下为虚线，左右为点状
- border-style: solid dashed dotted; —— 上为实线，左右为虚线，下为点状
- border-style: solid dashed dotted double; —— 四边各不同（double也是有效样式，表示双线）
搭配color和width使用更完整
border-style必须配合border-width和border-color才能完整显示边框。也可以直接使用复合属性border：
- border: 2px solid #000; —— 宽度2px，实线，黑色边框
- border-top: 1px dotted red; —— 只给顶部加红点线
注意：如果只设置border-style而没有指定宽度，默认可能无法看到边框，因为宽度默认为0。
实际应用场景建议
选择合适的边框样式有助于传达语义信息：
- 用
dotted标注上传区域，提示用户此处可拖入文件 - 用
inset模拟输入框的默认状态，增强交互真实感 - 用
groove或ridge制作复古风格按钮或分隔线 - 在调试布局时临时使用
solid red边框快速定位元素位置
border-style的特点，结合具体设计需求灵活运用，能让界面更有层次又不失简洁。 
