语法
border-left-color: color | transparent | initial | inherit;
border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { width: 300px; padding: 20px; border-style: solid; border-color: #666; border-left-color: #1c87c9; } </style> </head> <body> <h2>Border-left-color 示例</h2> <div>具有不同左边框颜色的Border-left-color属性的示例。</div> </body> </html>
考虑另一个示例,其中左边框的值设置为透明。
具有“透明”值的 border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> h2 { padding: 3px; text-align: center; border: 15px ridge #8ebf42; border-left-color: transparent; } </style> </head> <body> <h2>带有透明左边框的标题</h2> </body> </html>
我们可以将十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称设置为 border-left-color 属性的值。
具有命名颜色值的 border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { padding: 3px; border-left-style: solid; border-left-color: darkred; } </style> </head> <body> <div>指定左边框颜色</div> </body> </html>
带有十六进制值的 border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { padding: 3px; border-left-style: solid; border-left-color: #1c87c9; } </style> </head> <body> <div>使用16进制颜色值</div> </body> </html>
带有 RGB 值的 border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { padding: 3px; border-left-style: solid; border-left-color: rgb(142, 191, 66); } </style> </head> <body> <div>使用RGB值的Border-left-color属性</div> </body> </html>
带有 HSL 值的 border-left-color 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { padding: 3px; border-left-style: solid; border-left-color: hsl(89, 43%, 51%); } </style> </head> <body> <div>使用HSL颜色值</div> </body> </html>
border-left-color 属性指定元素左边框的颜色。
左边框的颜色与右、上、下边框的颜色,也可以用 border-color 速记属性指定。
如果使用border-left-color属性,首先要设置border-style或者border-left-style属性,然后再改变指定样式的颜色。
边框的默认宽度为中等。
我们可以使用 border-width 或者 border-left-width 属性定义宽度。
初始值 | 当前颜色 |
---|---|
应用于 | 所有元素。它也适用于::first-letter。 |
继承 | 不可继承 |
可动画的 | 对。左边框的颜色可以设置动画。 |
版本 | CSS1 |
DOM 语法 | object.style.borderLeft="1px solid black"; |
CSS border-left-color 属性值说明
值 | 说明 |
---|---|
color | 定义左边框的颜色。默认颜色是当前元素的颜色。可以使用颜色名称、十六进制颜色代码、rgb()、rgba()、hsl()、hsla()。必须项。 |
transparent | 将透明颜色应用于左边框。左边框仍将占用边框宽度值定义的空间。 |
initial | 将属性设置为其默认值。 |
inherit | 从父元素继承属性。 |
日期:2020-06-02 22:14:18 来源:oir作者:oir