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 属性的应用。

  1. 设置宽度、颜色和样式
p {
  border-bottom-width: 5px;
  border-bottom-style: dotted;
  border-bottom-color: #333;
}

效果：

border-bottom-width.png

  1. 快速设置下边框
h1 {
  border-bottom: 2px solid #000;
}

效果：

border-bottom-solid.png

  1. 设置下边框弧度
h2 {
  border-bottom: 2px solid #f00;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

效果：

border-bottom-border-radius.png

总结

CSS border-bottom 属性可以帮助我们快速地修改元素的下边框样式，可以通过设置宽度、样式和颜色来控制下边框的表现形式。同时，还可以使用全局属性来进一步控制下边框的形状和样式。

CSS border 属性 CSS border-bottom-color 属性