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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
---
title: border-color
slug: Web/CSS/border-color
translation_of: Web/CSS/border-color
---
<div>{{CSSRef}}</div>
<h2 id="概括">概括</h2>
<p><code>CSS属性</code> <strong><code>border-color</code></strong> 是一个用于设置元素四个边框颜色的快捷属性： {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* border-color: <em>color;</em> 单值语法 */
border-color: red;
/* border-color: <em>vertical horizontal;</em> 双值语法*/
border-color: red #f015ca;
/* border-color: <em>top horizontal bottom; 三值语法</em> */
border-color: red yellow green;
/* border-color: <em>top right bottom left; 四值语法</em> */
border-color: red yellow green blue;
border-color: inherit
</pre>
<h3 id="取值">取值</h3>
<dl>
<dt><code>color</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示四个边框的颜色，仅用于单值语法。</dd>
<dt><code>horizontal</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。</dd>
<dt><code>vertical</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。</dd>
<dt><code>top</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示上边框的颜色，仅用于三值或四值语法。</dd>
<dt><code>bottom</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示下边框的颜色，仅用于三值或四值语法。</dd>
<dt><code>right</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示右边框的颜色，仅用于四值语法。</dd>
<dt><code>left</code></dt>
<dd>使用 {{cssxref("<color>")}} 来表示左边框的颜色，仅用于四值语法。</dd>
<dt><code>inherit</code></dt>
<dd>这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。</dd>
</dl>
<h3 id="语法定义">语法定义</h3>
{{csssyntax}}
<h2 id="Complete_border-color_usage2">Complete_border-color_usage2</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="justone">
<p><code>border-color: red;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: red;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="horzvert">
<p><code>border-color: gold red;</code> is equivalent to</p>
<ul><li><code>border-top-color: gold;</code></li>
<li><code>border-right-color: red;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: red;</code></li>
</ul>
</div>
<div id="topvertbott">
<p><code>border-color: red cyan gold;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: gold;</code></li>
<li><code>border-left-color: cyan;</code></li>
</ul>
</div>
<div id="trbl">
<p><code>border-color: cyan black gold;</code> is equivalent to</p>
<ul><li><code>border-top-color: red;</code></li>
<li><code>border-right-color: cyan;</code></li>
<li><code>border-bottom-color: black;</code></li>
<li><code>border-left-color: gold;</code></li>
</ul>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#justone {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#topvertbott {
border-color: red cyan gold;
}
#trbl {
border-color: red cyan black gold;
}
div {
border: solid 0.3em;
width: auto;
margin: 0.5em;
padding: 0.5em;
}
ul {
margin: 0;
list-style: none;
}
</pre>
<p>{{ EmbedLiveSample('Complete_border-color_usage2', 600, 300) }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#border-color', 'border-color')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td><code>移除了transparent</code> 关键词，该关键词已归入{{cssxref("<color>")}} 数据类型。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>被当作快捷属性</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-color', 'border-color')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>首次被定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("css.properties.border-color")}}
<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.0")}} [1]</td>
<td>4.0</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>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.0</td>
<td>{{CompatGeckoMobile("1.9.2")}} [1]</td>
<td>7.0</td>
<td>11</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<p>[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. {{Cssxref("-moz-border-top-colors")}}, {{Cssxref("-moz-border-right-colors")}}, {{Cssxref("-moz-border-bottom-colors")}}, {{Cssxref("-moz-border-left-colors")}}</p>
<h2 id="其他参考">其他参考</h2>
<ul>
<li>与border-color相关的CSS属性: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}},</li>
<li>与边框相关的其他CSS属性: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}</li>
</ul>
<div id="gtx-trans" style="position: absolute; left: 101px; top: 1017px;">
<div class="gtx-trans-icon"></div>
</div>
|
