border-style是边框显示的关键,必须设置才能生效;配合border-width控制粗细和border-color定义颜色,三者协同工作,可简写为border属性。

在CSS中,border-width 和 border-style 是设置元素边框的重要属性。它们必须配合使用才能让边框生效。
border-style 是关键
边框要显示出来,首先必须设置 border-style。即使设置了宽度、颜色,只要没有定义样式,边框依然不会出现。
常见取值包括:
- solid:实线边框
- dashed:虚线边框
- dotted:点线边框
- none 或 hidden:无边框
border-width 控制粗细
在 border-style 不为 none 的前提下,border-width 才会起作用。它决定边框的厚度。
立即学习“前端免费学习笔记(深入)”;
可以使用预设关键词或具体数值:
- 关键词:thin、medium、thick
- 具体值:1px、2em 等
若未设置 border-width,浏览器会使用默认值(通常是 medium,约等于 3px)。
三者缺一不可(style、width、color)
完整边框需要 style、width 和 color 协同工作。其中 style 是开关,width 决定粗细。
示例写法:
div {
border-style: solid;
border-width: 4px;
border-color: #000;
}
也可以简写为:
div {
border: 4px solid #000;
}
基本上就这些。记住:没样式,就没边框。










