blob: 6edada19f8f0dc173ac8916d5a4785d94742363b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: border-left
slug: Web/CSS/border-left
tags:
- CSS
- CSS 属性
- CSS 边框
translation_of: Web/CSS/border-left
---
<div>{{CSSRef}}</div>
<p>CSS属性 <strong>border-left</strong> 是属性{{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, 和{{ Cssxref("border-left-width") }}的三者的缩写。这些属性都是在描述一个元素的左边的边框{{cssxref("border")}}。</p>
<pre class="brush:css no-line-numbers">border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed green;
</pre>
<p>这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。</p>
<div class="note">
<p>和CSS所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......</p>
<pre class="brush: css">border-left-style: dotted;
border-left: thick green;
</pre>
<p>......实际上应该是下面这个样子......</p>
<pre class="brush: css">border-left-style: dotted;
border-left: none thick green;
</pre>
<p>......并且在 border-left 之前定义的 {{ Cssxref("border-left-style") }} 的值也会被覆盖。由于 {{ Cssxref("border-left-style") }} 的默认值是 none, border-style的最终结果就是没有边框。</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p>这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。</p>
<h3 id="Values">Values</h3>
<dl>
<dt><code><br-width> </code></dt>
<dd>请参阅{{ Cssxref("border-left-width") }}.</dd>
<dt><code><br-style> </code></dt>
<dd>请参阅{{ Cssxref("border-left-style") }}.</dd>
<dt><code>{{cssxref("<color>")}}</code></dt>
<dd>请参阅 {{ Cssxref("border-left-color") }}.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example">Example</h2>
<pre class="brush: html"><div>
This box has a border on the left side.
</div></pre>
<pre class="brush: css">div {
border-left: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
</pre>
<p>{{ EmbedLiveSample('Example') }}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No significant changes.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>4</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
|
