CSS - border-left-color 属性

CSS border-left-color 属性指定元素的左侧边框颜色。在使用此属性之前，必须声明 border-left-style。

语法

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

属性值

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

CSS 左边框颜色属性示例

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

使用颜色名称的左边界颜色属性

可以使用颜色名称（例如红色、蓝色等）设置左边界颜色。指定的颜色将应用于边框。在以下示例中，颜色名称已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: red;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: green;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'red' border-left-color
    </h3>
    <p class="properties border">
        This border has 'green' border-left-color
    </p>
</body>

</html>

使用十六进制值的左边界颜色属性

可以使用十六进制值（例如 #ff0000）设置左边界颜色。指定的颜色将应用于边框。在以下示例中，十六进制值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: #ffaa00;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: #ff3333;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has '#ffaa00' border-left-color
    </h3>
    <p class="properties border">
        This border has '#ff3333' border-left-color
    </p>
</body>

</html>

使用 RGB 值的左边界颜色属性

可以使用 rgb 值（例如 rgb(255, 0, 0)）设置左边界颜色。指定的颜色将应用于边框。在以下示例中，rgb 值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: rgb(0, 0, 179);
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: rgb(0, 153, 77);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'rgb(0, 0, 179)' border-left-color
    </h3>
    <p class="properties border">
        This border has 'rgb(0, 153, 77)' border-left-color
    </p>
</body>

</html>

使用 HSL 值的左边界颜色属性

可以使用 hsl 值（例如 hsl(0, 100%, 50%)）设置左边界颜色。指定的颜色将应用于边框。在以下示例中，hsl 值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: hsl(180, 100%, 15%);
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: hsl(120, 50%, 40%);
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'hsl(180, 100%, 15%)' border-left-color
    </h3>
    <p class="properties border">
        This border has 'hsl(120, 50%, 40%)' border-left-color
    </p>
</body>

</html>

使用透明值的左边界颜色属性

要设置透明的左边界，我们使用 transparent 值。在以下示例中，transparent 值已用于边框。

示例

    
<!DOCTYPE html>
<html>

<head>
    <style>
        .properties {
            text-align: center;
            padding: 12px;
            border-left-width: 10px;
        }

        .heading {
            background-color: lightgreen;
            border-left-style: solid;
            border-left-color: transparent;
        }

        .border {
            border: 5px solid #a6890c;
            border-left-style: dashed;
            border-left-color: transparent;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-left-color property
    </h2>
    <h3 class="properties heading">
        This heading has 'transparent' border-left-color
    </h3>
    <p class="properties border">
        This border has 'transparent' border-left-color
    </p>
</body>

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面