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
|
---
title: border-top-style
slug: Web/CSS/border-top-style
tags:
- CSS
- CSS 属性
- CSS 边框
translation_of: Web/CSS/border-top-style
---
<div>{{ CSSRef}}</div>
<p><strong><code>border-top-style</code></strong> <a href="/en/CSS">CSS</a> 设置元素上边框的 {{cssxref("border")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
<div class="note"><strong>Note:</strong> 此规范并未定义不同样式的边框边角处如何连接。</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;
/* Global values */
border-top-style: inherit;
border-top-style: initial;
border-top-style: unset;
</pre>
<p>选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 <strong>border-top-style</strong> 属性的值.</p>
<h3 id="形式化语法">形式化语法</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">示例</h2>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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 notranslate">/* Define look of the table */
table {
border-width: 2px;
background-color: #52E385;
}
tr, td {
padding: 3px;
}
/* border-top-style example classes */
.b1 {border-top-style: none;}
.b2 {border-top-style: hidden;}
.b3 {border-top-style: dotted;}
.b4 {border-top-style: dashed;}
.b5 {border-top-style: solid;}
.b6 {border-top-style: double;}
.b7 {border-top-style: groove;}
.b8 {border-top-style: ridge;}
.b9 {border-top-style: inset;}
.b10 {border-top-style: outset;}</pre>
<h4 id="输出结果">输出结果</h4>
<p>{{ EmbedLiveSample('Examples', 300, 200) }}</p>
<h2 id="Specifications" name="Specifications">规则</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规则</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td>No significant change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.border-top-style")}}</p>
<h2 id="See_Also" name="See_Also">相关词条</h2>
<ul>
<li>The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-style") }}.</li>
<li>The other top-border-related properties: {{ Cssxref("border-top") }}, {{ Cssxref("border-top-color") }}, and {{ Cssxref("border-top-width") }}.</li>
</ul>
|
