blob: 88731967024611d12eb66ef435cd4f7a51d5b5b7 (
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
156
157
158
159
160
161
162
|
---
title: Arrière-plans et bordures CSS
slug: Web/CSS/Arrière-plans_et_bordures_CSS
tags:
- CSS
- Référence(2)
translation_of: Web/CSS/CSS_Backgrounds_and_Borders
translation_of_original: Web/CSS/CSS_Background_and_Borders
---
<div>{{CSSRef}}</div>
<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p>
<h2 id="Référence">Référence</h2>
<h3 id="Propriétés_CSS">Propriétés 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("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>
<li>{{cssxref("box-shadow")}}</li>
</ul>
</div>
<h2 id="Guides">Guides</h2>
<dl>
<dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt>
<dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd>
<dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt>
<dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd>
</dl>
<h2 id="Outils">Outils</h2>
<dl>
<dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt>
<dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd>
<dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt>
<dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd>
<dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt>
<dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd>
</dl>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</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="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Support simple</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>Fonctionnalité</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support simple</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.2")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
