From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/border-left/index.html | 157 +++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 files/zh-cn/web/css/border-left/index.html (limited to 'files/zh-cn/web/css/border-left/index.html') diff --git a/files/zh-cn/web/css/border-left/index.html b/files/zh-cn/web/css/border-left/index.html new file mode 100644 index 0000000000..6edada19f8 --- /dev/null +++ b/files/zh-cn/web/css/border-left/index.html @@ -0,0 +1,157 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS 属性 + - CSS 边框 +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

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}}

+ +

Syntax

+ +

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

+ +

Values

+ +
+
<br-width> 
+
请参阅{{ Cssxref("border-left-width") }}.
+
<br-style> 
+
请参阅{{ Cssxref("border-left-style") }}.
+
{{cssxref("<color>")}}
+
请参阅 {{ Cssxref("border-left-color") }}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +
<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') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ 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.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
-- cgit v1.2.3-54-g00ecf