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
|
---
title: border-right-width
slug: Web/CSS/border-right-width
tags:
- CSS
- CSS属性
- CSS边框
- 引用
translation_of: Web/CSS/border-right-width
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> 的<strong><code>border-right-width</code></strong> 用来设置盒子右边框的宽度。</p>
<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush:css no-line-numbers">/* Keyword values */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;
/* <length> values */
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;
/* Global keywords */
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;
</pre>
<h3 id="数值">数值</h3>
<dl>
<dt><code><line-width></code></dt>
<dd>定义边框的宽度，或者作为显性非负的长度值 {{cssxref("<length>")}} 或者是关键字。如果他是一个关键字，它必须是下列值的一种：
<table class="standard-table">
<tbody>
<tr>
<td><code>thin</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div>
</td>
<td>一个细边框</td>
</tr>
<tr>
<td><code>medium</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div>
</td>
<td>一个中等边框</td>
</tr>
<tr>
<td><code>thick</code></td>
<td>
<div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div>
</td>
<td>一个粗边框</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>笔记:</strong> 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 <code>thin ≤ medium ≤ thick</code>, 在单独文档中这些值内部是恒定不变的。</p>
</div>
</dd>
</dl>
<h3 id="形式语法">形式语法</h3>
{{csssyntax}}
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>Element 1</div>
<div>Element 2</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-right-width: thick;
}
div:nth-child(2) {
border-right-width: 2em;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('Example', '100%')}}</p>
<h2 id="规格">规格</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-right-width')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>没有规格变化.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>没有规格变化.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>最初的定义.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.border-right-width")}}</p>
<h2 id="其他">其他</h2>
<ul>
<li>The other border-width-related CSS properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li>
<li>The other border-right-related CSS properties: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, and {{Cssxref("border-right-color")}}.</li>
</ul>
|
