CSS - border-bottom-color 属性

CSS 的 **border-bottom-color** 属性设置元素底部边框的颜色。可以通过提供不同格式的颜色值（例如名称、rgb 值、十六进制值或 hsl 值）来修改边框的外观。

语法

border-bottom-color: color | transparent | initial | inherit;

属性值

值	描述
color	指定边框的颜色。可以使用不同的颜色格式（名称、rgb 值、十六进制值、hsl 值等）。默认颜色为元素的当前颜色。
transparent	指定边框必须是透明的。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 底部边框颜色属性示例

以下示例使用不同的值解释了 **border-bottom-color** 属性。

使用颜色名称的底部边框颜色属性

可以使用颜色名称设置 **border-bottom-color**。在以下示例中，使用了蓝色。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: blue;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using color name: blue
  </p>
</body>

</html>

使用十六进制值的底部边框颜色属性

也可以使用十六进制值设置 **border-bottom-color**。在以下示例中，使用了 #ff6600 值。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: #ff6600;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using hexadecimal value:#ff6600
  </p>
</body>

</html>

使用 RGB 值的底部边框颜色属性

也可以使用 rgb 值设置 **border-bottom-color**。在以下示例中，使用了 rgb 值 (255, 166, 77)。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: rgb(255, 166, 77);
    }
  </style>
</head>

<body>
  <h2>
  CSS border-bottom-color property
  </h2>
  <p> 
  This shows the border bottom color property 
  using rgb value:(255, 166, 77)
  </p>
</body>

</html>

使用 HSL 值的底部边框颜色属性

也可以使用 hsl 值设置 **border-bottom-color**。在以下示例中，使用了 hsl 值 (45, 100%, 30%)。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: hsl(45, 100%, 30%);
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using hsl value:(45, 100%, 30%)
  </p>
</body>

</html>

使用透明值的底部边框颜色属性

要获得透明的 **border-bottom-color**，可以使用 transparent 值。在以下示例中，使用了 transparent 值。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: transparent;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using transparent value.
  </p>
</body>

</html>

支持的浏览器

属性
border-bottom-color	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面