border-left属性是用于设置元素左侧边框的宽度,颜色和样式的简写属性。
border-left
属性可以同时设置一个元素的border-left-width属性、border-left-style属性和border-left-color属性。
border-left
属性可以接收1个、2个或3个属性值,没有设置的值会使用它们的初始值。
border-left
属性中的值的顺序是可以任意的。如果你单独设置了某个元素的左侧边框的属性之后在再使用border-left
属性来设置左侧边框样式,那么border-left
属性中的值会覆盖前面设置的值,没有被设置的值使用它的默认值。例如:
border-left-style: dotted; border-left: thick green;
上面的代码等效于:
border-left-style: dotted; border-left: none thick green;
由于在border-left
属性中的没有给出border-left-style属性,它会被设置为初始值none
,前面设置的border-left-style: dotted;
将会被忽略。
官方语法
border-left: <line-width> || <line-style> || <color>
参数:
<line-width>
:左侧边框的宽度。详细信息可以查看border-left-width属性。<line-style>
:左侧边框的样式。详细信息可以查看border-left-style属性。<color>
:左侧边框的颜色。详细信息可以查看border-left-color属性。
border-left
属性的初始值为:
border-left-width: medium border-left-style: none border-left-color: currentColor
下面是border-left
属性取值的示例代码:
border-left: 1px; border-left: 2px dotted; border-left: medium dashed blue;
在线演示
下面的例子为元素左侧边框设置10像素的绿色实线边框。
左侧边宽度为10像素绿色实线
浏览器支持
所有的现代浏览器都支持border-left
属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。