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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
---
title: border-style
slug: Web/CSS/border-style
tags:
- CSS
- CSS 属性
- CSS 边框
- Web
- 参考
- 布局
translation_of: Web/CSS/border-style
---
<h2 id="概述">概述</h2>
<p>{{ CSSRef("CSS Borders") }}</p>
<p><code>border-style</code> 是一个 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 简写属性，用来设定元素所有边框的样式。</p>
<div class="note"><strong>注意：</strong><code>border-style</code> 默认值是 <code>none</code>，这意味着如果您只修改 {{ Cssxref("border-width") }} 和 {{ Cssxref("border-color") }} 是不会出现边框的。</div>
<p>{{EmbedInteractiveExample("pages/css/border-style.html")}}</p>
<div class="hidden">
<p>The source for this interactiv 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>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* Apply to all four sides */
border-style: dashed;
/* horizontal | vertical */
border-style: dotted solid;
/* top | horizontal | bottom */
border-style: hidden double dashed;
/* top | right | bottom | left */
border-style: none solid dotted dashed;
/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;
</pre>
<h3 id="取值">取值</h3>
<dl>
<dt><code><br-style></code></dt>
<dd>关键字用于描述边框样式。它可以有以下取值：
<table class="standard-table">
<tbody>
<tr>
<td style="vertical-align: middle;"><code>none</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">和关键字 <code>hidden</code> 类似，不显示边框。在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 <code>0</code>，即使先前已经指定过它的值。在单元格边框重叠情况下，<code>none</code> 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>hidden</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">和关键字 <code>none</code> 类似，不显示边框。<span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 </span><code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">0</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">，即使先前已经指定过它的值。在单元格边框重叠情况下，</span><code>hidden</code> 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dotted</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为一系列圆点。标准中没有定义两点之间的间隔大小，<span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">视不同实现而定</span>。圆点半径是 {{ cssxref("border-width") }} 计算值的一半。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>dashed</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>solid</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为一条实线。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>double</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为一条双实线，宽度是 {{ cssxref("border-width") }} 。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>groove</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为有雕刻效果的边框，样式与 <code>ridge</code> 相反。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>ridge</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为有浮雕效果的边框，样式与 <code>groove</code> 相反。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>inset</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">显示为有陷入效果的边框，样式与 <code>outset</code> 相反。当它指定到 {{ cssxref("border-collapse") }} 为 <code>collapsed</code> 的单元格时，会显示为 <code>groove</code> 的样式。</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>outset</code></td>
<td style="vertical-align: middle;">
<div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
</td>
<td style="vertical-align: middle;">
<p>显示为有突出效果的边框，样式与 <code>inset</code> 相反。当它指定到 {{ cssxref("border-collapse") }} 为 <code>collapsed</code> 的单元格时，会显示为 <code>ridge</code> 的样式。</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">包含所有属性取值的表格</h3>
<p>以下是一个所有取值的例子</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">/* 定义表格外观 */
table {
border-width: 3px;
background-color: #52E396;
}
tr, td {
padding: 2px;
}
/* border-style 示例 */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}</pre>
<h4 id="输出">输出</h4>
<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table" style="font-family: lucida grande,lucida sans unicode,dejavu sans,lucida,arial,helvetica,sans-serif; font-size: 14px; font-weight: normal; line-height: 1.572;">
<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-style', 'border-style') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>No change</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Added the 2-, 3- and 4-value syntaxes</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td></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-style")}}</p>
<div id="compat-mobile"></div>
<h2 id="另请参阅">另请参阅</h2>
<ul>
<li>和边框有关的 CSS 简写属性：{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
</ul>
|
