CSS border-bottom 属性
CSS border-bottom 属性
CSS border-bottom 属性定义一个元素的下边界边框。
使用语法
border-bottom: border-width border-style border-color;
border-width, border-style, border-color 是可选的。
我们可以设置不同的值来控制下边框的样式,例如:
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000;
同时,也可以通过简化的方式来书写:
border-bottom: 1px solid #000;
取值说明
1. border-bottom-width
设置下边框的宽度,可以设置为三种长度单位:px、em、rem。
2. border-bottom-style
设置下边框的样式,有以下几种:
- solid:实线
- dashed:虚线
- dotted:点线
- double:双线
- groove:凹槽线
- ridge:脊梁线
- inset:内凹线
- outset:外凸线
- none:无样式
3. border-bottom-color
设置下边框的颜色,可以设置为十六进制颜色值、RGB颜色值或者预定义颜色名。
全局属性
border-bottom 属性还可以使用全局属性,例如 border-bottom-radius、border-bottom-image 等等。这些属性可以进一步控制下边框的形状和样式。
实例演示
下面是一些实例演示,可以帮助我们更好地理解和掌握 border-bottom 属性的应用。
- 设置宽度、颜色和样式
p {
border-bottom-width: 5px;
border-bottom-style: dotted;
border-bottom-color: #333;
}
效果:
- 快速设置下边框
h1 {
border-bottom: 2px solid #000;
}
效果:
- 设置下边框弧度
h2 {
border-bottom: 2px solid #f00;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
效果:
总结
CSS border-bottom 属性可以帮助我们快速地修改元素的下边框样式,可以通过设置宽度、样式和颜色来控制下边框的表现形式。同时,还可以使用全局属性来进一步控制下边框的形状和样式。