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

列印頁面