border-left
CSS属性border-left是属性border-left-color
,border-left-style
,和border-left-width
的三者的缩写。这些属性都是在描述一个元素的左边的边框线。
示例
border-left: 1px; border-left: 2px dotted; border-left: medium dashed green;
这三种属性值的缩写需要按照顺序定义数值,也可以省略其中的一个或者两个。
和CSS所有的缩写属性一样,border-left 总是会设置该缩写属性所包含的全部属性值,即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子
border-left-style: dotted; border-left: thick green;
实际上应该是下面这个样子
border-left-style: dotted; border-left: none thick green;
并且在 border-left 之前定义的border-left-style
的值也会被覆盖。由于border-left-style
的默认值是none,border-style
的最终结果就是没有边框。
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
浏览器都支持border-left |
语法
border-left :border-left-width|border-left-style|border-left-color
这三种属性值的缩写需要按照顺序定义数值,也可以省略其中的一个或者两个。
取值
- border-left-width:设置或检索对象边框宽度。取值
<length>
|thin|medium|thick。参见border-left-width
。 - border-left-style:设置或检索对象边框样式。参见
border-left-style
。 - border-left-color:设置或检索对象边框颜色。参见
border-left-color
。
初始值 | |
适用于 | 所有元素,也包含::first-letter |
继承性 | 无 |
动画性 | 否 |
计算值 |
|
实例
<div> this box has a border on the left side. </div> div { border-left: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; }