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
|
---
title: border-width
slug: Web/CSS/border-width
translation_of: Web/CSS/border-width
---
<div>{{CSSRef}}</div>
<h2 id="概要">概要</h2>
<p> <strong><code>border-width</code></strong> 属性可以设置盒子模型的边框宽度。</p>
<p>{{EmbedInteractiveExample("pages/css/border-width.html")}}</p>
<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<p>它是{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, 和 {{cssxref("border-left-width")}}的简写;</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框<em> */
</em>border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;
/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;
/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;
</pre>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<dl>
<dt>
<table class="standard-table">
<tbody>
<tr>
<td style="vertical-align: middle;">关键字</td>
<td style="vertical-align: middle;">实例</td>
<td style="vertical-align: middle;">说明</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>thin</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;">
</div>
</td>
<td style="vertical-align: middle;">细边线</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>medium</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;">
</div>
</td>
<td style="vertical-align: middle;">中等边线</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>thick</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;">
</div>
</td>
<td style="vertical-align: middle;">宽边线</td>
</tr>
</tbody>
</table>
</dt>
<dd></dd>
</dl>
<div class="blockIndicator note">
<p><strong>提示：</strong>规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然thin≤medium≤thick，并且值在单个文档中是恒定的</p>
</div>
<h2 id="示例">示例</h2>
<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3>
<p id="A_mix_of_values_and_lengths">HTML</p>
<pre class="brush: html"><p id="sval">
one value: 6px wide border on all 4 sides</p>
<p id="bival">
two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p id="treval">
three different values: 0.3em top, 9px bottom, and zero width right and left</p>
<p id="fourval">
four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">#sval {
border: ridge #ccc;
border-width: 6px;
}
#bival {
border: solid red;
border-width: 2px 10px;
}
#treval {
border: dotted orange;
border-width: 0.3em 0 9px;
}
#fourval {
border: solid lightgreen;
border-width: thin medium thick 1em;
}
p {
width: auto;
margin: 0.25em;
padding: 0.25em;
}</pre>
<h4 id="运行结果">运行结果</h4>
<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p>
<h2 id="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', '#the-border-width', 'border-width')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Added the constraint that values' meaning must be constant inside a document.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>
<p>{{Compat("css.properties.border-width")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
<li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
</ul>
|
