CSS border-top-color 属性-之路教程

CSS border-top-color 属性

border-top-color 属性定义了元素上边框的颜色。

我们可以使用 border-color 速记属性指定顶部边框颜色以及底部、右侧和左侧边框颜色。

如果使用 border-top-color 属性，则应先设置 border-style 或者 border-top-style 属性，然后更改定义样式的颜色。

边框的默认宽度为中等。
我们可以使用 border-width 或者 border-top-width 属性指定宽度。

初始值	当前颜色
应用于	所有元素。它也适用于::first-letter。
继承	不可继承
可动画的	上边框的颜色可以设置动画。
版本	CSS1
DOM 语法	object.style.borderTopColor=“black”；

CSS border-top-color 属性值说明

值	说明
color	定义上边框的颜色。默认颜色是当前元素的颜色。可以使用颜色名称、十六进制颜色代码、rgb（）、rgba（）、hsl（）、hsla（）。必需值。
transparent	将透明颜色应用于上边框。上边框仍将占用边框宽度值定义的空间。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

语法

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

border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-color example</h2>
    <div>设置顶部边框颜色</div>
  </body>
</html>

具有“透明”值的 border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding-bottom: 8px;
        text-align: center;
        border: 12px groove #1c87c9;
        border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>顶部边框为透明</h2>
  </body>
</html>

十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称可以用作 border-top-color 属性的值。

具有命名颜色值的 border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>使用名称颜色的Border-top-color 属性</div>
  </body>
</html>

带有十六进制值的 border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>使用16进制的Border-top-color 属性</div>
  </body>
</html>

具有 RGB 值的 border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>使用RGB的Border-top-color 属性</div>
  </body>
</html>

带有 HSL 值的 border-top-color 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>使用HSL值的Border-top-color 属性</div>
  </body>
</html>

日期：2020-06-02 22:14:19 来源：oir作者：oir

←CSS 边框样式属性

CSS border-top-left-radius 属性→