--- title: border-left slug: Web/CSS/border-left tags: - CSS - CSS 属性 - CSS 边框 translation_of: Web/CSS/border-left ---
CSS属性 border-left 是属性{{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, 和{{ Cssxref("border-left-width") }}的三者的缩写。这些属性都是在描述一个元素的左边的边框{{cssxref("border")}}。
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 之前定义的 {{ Cssxref("border-left-style") }} 的值也会被覆盖。由于 {{ Cssxref("border-left-style") }} 的默认值是 none, border-style的最终结果就是没有边框。
{{cssinfo}}
这三种属性值的缩写需要按照顺序定义数值,也可以省略其中的一个或者两个。
<br-width>
<br-style>
{{cssxref("<color>")}}
<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; }
{{ EmbedLiveSample('Example') }}
Specification | Status | Comment |
---|---|---|
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }} | {{ Spec2('CSS3 Backgrounds') }} | No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it. |
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }} | {{ Spec2('CSS2.1') }} | No significant changes. |
{{ SpecName('CSS1', '#border-left', 'border-left') }} | {{ Spec2('CSS1') }} | Initial definition. |
{{CompatibilityTable}}
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | {{CompatVersionUnknown}} | {{ CompatGeckoDesktop("1.0") }} | 4 | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | {{CompatVersionUnknown}} | {{ CompatGeckoMobile("1.0") }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |