blob: 96d540eedd94169d18ca6534c20223edbe239c40 (
plain)
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
|
---
title: CSS Background and Borders
slug: Web/CSS/CSS_Background_and_Borders
tags:
- CSS
- CSS Backgrounds and Borders
- CSS Reference
- NeedsTranslation
- Overview
- TopicStub
translation_of: Web/CSS/CSS_Backgrounds_and_Borders
translation_of_original: Web/CSS/CSS_Background_and_Borders
---
<p>{{CSSRef}}</p>
<p><strong>CSS 背景与边框</strong> 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。</p>
<h2 id="参考">参考</h2>
<h3 id="CSS_属性">CSS 属性</h3>
<div class="index">
<ul>
<li>{{cssxref("background")}}</li>
<li>{{cssxref("background-attachment")}}</li>
<li>{{cssxref("background-clip")}}</li>
<li>{{cssxref("background-color")}}</li>
<li>{{cssxref("background-image")}}</li>
<li>{{cssxref("background-origin")}}</li>
<li>{{cssxref("background-position")}}</li>
<li>{{cssxref("background-repeat")}}</li>
<li>{{cssxref("background-size")}}</li>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("border")}}</li>
<li>{{cssxref("border-bottom")}}</li>
<li>{{cssxref("border-bottom-color")}}</li>
<li>{{cssxref("border-bottom-left-radius")}}</li>
<li>{{cssxref("border-bottom-right-radius")}}</li>
<li>{{cssxref("border-bottom-style")}}</li>
<li>{{cssxref("border-bottom-width")}}</li>
<li>{{cssxref("border-collapse")}}</li>
<li>{{cssxref("border-color")}}</li>
<li>{{cssxref("border-image")}}</li>
<li>{{cssxref("border-image-outset")}}</li>
<li>{{cssxref("border-image-repeat")}}</li>
<li>{{cssxref("border-image-slice")}}</li>
<li>{{cssxref("border-image-source")}}</li>
<li>{{cssxref("border-image-width")}}</li>
<li>{{cssxref("border-left")}}</li>
<li>{{cssxref("border-left-color")}}</li>
<li>{{cssxref("border-left-style")}}</li>
<li>{{cssxref("border-left-width")}}</li>
<li>{{cssxref("border-radius")}}</li>
<li>{{cssxref("border-right")}}</li>
<li>{{cssxref("border-right-color")}}</li>
<li>{{cssxref("border-right-style")}}</li>
<li>{{cssxref("border-right-width")}}</li>
<li>{{cssxref("border-style")}}</li>
<li>{{cssxref("border-top")}}</li>
<li>{{cssxref("border-top-color")}}</li>
<li>{{cssxref("border-top-left-radius")}}</li>
<li>{{cssxref("border-top-right-radius")}}</li>
<li>{{cssxref("border-top-style")}}</li>
<li>{{cssxref("border-top-width")}}</li>
<li>{{cssxref("border-width")}}</li>
</ul>
</div>
<h2 id="导航">导航</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">应用CSS多重背景</a></dt>
<dd>阐述设置元素背景方法以及背景、元素之间的交互方式</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">缩放背景图片</a></dt>
<dd>阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。</dd>
</dl>
<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') }}</td>
<td>{{ Spec2('CSS3 Backgrounds') }}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器支持">浏览器支持</h2>
<p>{{CompatibilityTable()}}</p>
<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")}}</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>{{CompatVersionUnknown()}}</td>
<td>{{CompatGeckoMobile("1.9.2")}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
