答案:CSS边框由border-width、border-style和border-color设置,可合并为border简写;border-style必设否则无边框,三属性分别控制宽、样、色,支持独立或统一四边设置。

在CSS中,边框可以通过 border-width、border-style 和 border-color 三个属性分别设置边框的宽度、样式和颜色。这三个属性可以单独使用,也可以合并为 border 简写属性。
1. border-width:设置边框的宽度
该属性定义边框的粗细,可以使用预定义关键字或具体长度值:
- thin:细边框(通常为1px)
- medium:中等边框(默认值,通常为3px)
- thick:粗边框(通常为4px)
- 具体数值,如 2px、0.5em 等
也可以为四条边分别设置:
border-width: 2px 4px 6px 8px; /* 上 右 下 左 */ border-width: 2px 4px; /* 上下 左右 */ border-width: 2px; /* 四边相同 */
2. border-style:设置边框的样式
这是必须设置的属性,否则边框不会显示(即使设置了宽度和颜色)。常用样式包括:
立即学习“前端免费学习笔记(深入)”;
- solid:实线
- dashed:虚线
- dotted:点线
- double:双线
- none:无边框(默认)
- hidden:隐藏边框(与 none 类似,但在表格中处理不同)
同样支持四边独立设置:
border-style: solid dashed dotted double;
3. border-color:设置边框的颜色
可以使用颜色名称、十六进制、RGB、HSL等格式指定颜色:
border-color: red #ccc rgb(0,128,255) hsl(240, 50%, 70%);
若只设置一个值,则四边颜色相同。未设置时,默认继承文本颜色(color 属性)。
4. 综合使用示例
将三个属性组合使用:
.example {
border-width: 3px;
border-style: dashed;
border-color: #f00;
}
等价于简写形式:
.example {
border: 3px dashed #f00;
}
基本上就这些。掌握这三个属性,就能灵活控制元素边框的外观。注意:只要使用了 border-style 且不为 none,边框才会显示。










