Comparaison de révisions

border-image-width

Révision 312489 :

Révision 312489 par GiulianT le

Révision 312573 :

Révision 312573 par GiulianT le

Titre :
border-image-width
border-image-width
Identifiant d'URL :
CSS/border-image-width
CSS/border-image-width
Contenu :

Révision 312489
Révision 312573
n10    <h2 id="Summary">n10    <h2 id="Sommaire">
11      Summary11      Sommaire
n14      The <code>border-image-width</code> CSS property defines thn14      La propriété CSS <code>border-image-width</code> définit la
>e offset to use for dividing the border image in nine parts, the > largeur du contour de l'élément.
>top-left corner, central top edge, top-right-corner, central righ 
>t edge, bottom-right corner, central bottom edge, bottom-left cor 
>ner, and central right edge. They represent inward distance from  
>the top, right, bottom and right edges. 
n21        <dfn>Applies to</dfn> all elements, except internal tablen21        <dfn>S'applique à</dfn> tous les éléments, excepté les él
> elements when {{ cssxref("border-collapse") }} is set to <code>c>éments de type table quand la propriété {{ cssxref("border-collap
>ollapse</code>.>se") }} a pour valeur <code>collapse</code>.
n24        <dfn>{{ Xref_cssinherited() }}</dfn> non24        <dfn>{{ Xref_cssinherited() }}</dfn> Non
n27        <dfn>Percentage</dfn> Relative to the width, for horizontn27        <dfn>Pourcentage</dfn> Relatif à la largeur des bords de 
>al effects, or the height, for vertical effects, of the border im>l'image, pour les effets horizontaux, ou à sa hauteur, pour les e
>age area.>ffets verticaux.
n33        <dfn>{{ Xref_csscomputed() }}</dfn> all {{ xref_csslengthn33        <dfn>{{ Xref_csscomputed() }}</dfn> Toutes les {{ xref_cs
>() }} made absolute, or as specified>slength() }} sont considérées comme absolues, ou spécifiées.
n36        <dfn>Animatable</dfn> non36        <dfn>Animable</dfn> Non
n40      Syntaxn40      Syntaxe
n43Formal grammar: [ <a href="/en/CSS/length" title="en/CSS/length">n43Syntaxe formelle : [ <a href="/fr/CSS/length" title="fr/CSS/longu
>&lt;length&gt;</a> | <a href="/en/CSS/percentage" title="percenta>eur">&lt;longueur&gt;</a> | <a href="/fr/CSS/pourcentage" title="
>ge">&lt;percentage&gt;</a> | <a href="/en/CSS/number" title="en/C>pourcentage">&lt;pourcentage&gt;</a> | <a href="/fr/CSS/nombre" t
>SS/number">&lt;number&gt;</a> | auto ]{1,4} >itle="fr/CSS/nombre">&lt;nombre&gt;</a> | auto ]{1,4} 
n46border-image-width: <em>width</em>                    <em>  /* Onn46border-image-width: <em>width</em>                    <em>  /* Un
>e-value syntax */</em>       E.g. border-image-width: 3;>e seule valeur */</em>
47border-image-width: <em>horizontal</em> <em>vertical</em>        47border-image-width: <em>horizontal</em> <em>vertical</em>        
><em>/* Two-valusyntax */       </em>E.g. border-image-width: 2e><em>/* Deux valeurs */       </em>
>m 3em; 
48border-image-width: <em>top</em> <em>vertical</em> <em>bottom   <48border-image-width: <em>top</em> <em>vertical</em> <em>bottom   <
>/em><em>     /* Three-valusyntax */     </em>E.g. border-image->/em><em>     /* Trois valeurs */     </em>E.g. border-image-width
>width: 5% 15% 10%;>: 5% 15% 10%;
t53    <div style="font-size: 0.9em;">t
54      <p style="float:left; margin:0:">
55        where:
56      </p>
57      <dl style="padding-left:6em;">
58        <dt style="float:left;width:7.5em">
59          <em>width</em>
60        </dt>
61        <dd style="padding-left:7.5em">
62          Is a value denoting the width of the image used as a bo
>rder to apply to all four edges. It is used only in the one-value 
> syntax. 
63        </dd>
64        <dt style="float:left;width:7.5em">
65          <em>horizontal</em>
66        </dt>
67        <dd style="padding-left:7.5em">
68          Is a value denoting the width of the image used as a bo
>rder to apply to all horizontal edges, that is the top and bottom 
> edges. It is used only in the two-value syntax. 
69        </dd>
70        <dt style="float:left;width:7.5em">
71          <em>vertical</em>
72        </dt>
73        <dd style="padding-left:7.5em">
74          Is a value denoting the width of the image used as a bo
>rder to apply to all vertical edges, that is the right and left e 
>dges. It is used only in the two- and three-value syntaxes. 
75        </dd>
76        <dt style="float:left;width:7.5em">
77          <em>top</em>
78        </dt>
79        <dd style="padding-left:7.5em">
80          Is a value denoting the width of the image used as a bo
>rder to apply to the top edge. It is used only in the three- and  
>four-value syntaxes. 
81        </dd>
82        <dt style="float:left;width:7.5em">
83          <em>bottom</em>
84        </dt>
85        <dd style="padding-left:7.5em">
86          Is a value denoting the width of the image used as a bo
>rder to apply to the bottom edge. It is used only in the three- a 
>nd four-value syntaxes. 
87        </dd>
88        <dt style="float:left;width:7.5em">
89          <em>right</em>
90        </dt>
91        <dd style="padding-left:7.5em">
92          Is a value denoting the width of the image used as a bo
>rder to apply to the top edge. It is used only in the four-value  
>syntax. 
93        </dd>
94        <dt style="float:left;width:7.5em">
95          <em>left</em>
96        </dt>
97        <dd style="padding-left:7.5em">
98          Is a value denoting the width of the image used as a bo
>rder to apply to the top edge. It is used only in the four-value  
>syntax. 
99        </dd>
100        <dt style="float:left;width:7.5em">
101          <code>inherit</code>
102        </dt>
103        <dd style="padding-left:7.5em">
104          Is a keyword indicating that all four values are inheri
>ted from their parent's element calculated value. 
105        </dd>
106      </dl>
107    </div>
108    <h3 id="Values">
109      Values
110    </h3>
111    <dl>
112      <dt>
113        <code>&lt;length&gt;</code>
114      </dt>
115      <dd>
116        Represents the length of the image slice. It can be an ab
>solute or relative length. This length must not be negative. 
117      </dd>
118      <dt>
119        <code>&lt;percentage&gt;</code>
120      </dt>
121      <dd>
122        Represents the percentage of the image slice relative to 
>the height, or width, of the border image area. The percentage mu 
>st not be negative. 
123      </dd>
124      <dt>
125        <code>&lt;number&gt;</code>
126      </dt>
127      <dd>
128        Represents a multiple of the computed value of the elemen
>t's {{ cssxref("border-width") }} property to be used as the imag 
>e slice size. The number must not be negative. 
129      </dd>
130      <dt>
131        <code>auto</code>
132      </dt>
133      <dd>
134        Indicates that the width, or height, of the image size mu
>st be the intrinsic size of that dimension. 
135      </dd>
136    </dl>
137    <h2 id="Specifications" name="Specifications">
138      Specifications
139    </h2>
140    <table class="standard-table">
141      <thead>
142        <tr>
143          <th scope="col">
144            Specification
145          </th>
146          <th scope="col">
147            Status
148          </th>
149          <th scope="col">
150            Comment
151          </th>
152        </tr>
153      </thead>
154      <tbody>
155        <tr>
156          <td>
157            {{ SpecName('CSS3 Backgrounds', '#border-image-width'
>, 'border-image-width') }} 
158          </td>
159          <td>
160            {{ Spec2('CSS3 Backgrounds') }}
161          </td>
162          <td>
163            Initial specification
164          </td>
165        </tr>
166      </tbody>
167    </table>
168    <h2 id="Browser_compatibility">
169      Browser compatibility
170    </h2>
171    <p>
172      {{ CompatibilityTable() }}
173    </p>
174    <div id="compat-desktop">
175      <table class="compat-table">
176        <tbody>
177          <tr>
178            <th>
179              Feature
180            </th>
181            <th>
182              Firefox (Gecko)
183            </th>
184            <th>
185              Chrome
186            </th>
187            <th>
188              Internet Explorer
189            </th>
190            <th>
191              Opera
192            </th>
193            <th>
194              Safari
195            </th>
196          </tr>
197          <tr>
198            <td>
199              Basic support
200            </td>
201            <td>
202              {{ CompatGeckoDesktop("13.0") }}
203            </td>
204            <td>
205              15.0
206            </td>
207            <td>
208              {{ CompatNo() }}
209            </td>
210            <td>
211              {{ CompatNo() }}
212            </td>
213            <td>
214              {{ CompatNo() }}
215            </td>
216          </tr>
217        </tbody>
218      </table>
219    </div>
220    <div id="compat-mobile">
221      <table class="compat-table">
222        <tbody>
223          <tr>
224            <th>
225              Feature
226            </th>
227            <th>
228              Firefox Mobile (Gecko)
229            </th>
230            <th>
231              Android
232            </th>
233            <th>
234              IE&nbsp;Phone
235            </th>
236            <th>
237              Opera Mobile
238            </th>
239            <th>
240              Safari Mobile
241            </th>
242          </tr>
243          <tr>
244            <td>
245              Basic support
246            </td>
247            <td>
248              {{ CompatGeckoMobile("13.0") }}
249            </td>
250            <td>
251              {{ CompatUnknown() }}
252            </td>
253            <td>
254              {{ CompatNo() }}
255            </td>
256            <td>
257              {{ CompatUnknown() }}
258            </td>
259            <td>
260              {{ CompatUnknown() }}
261            </td>
262          </tr>
263        </tbody>
264      </table>
265    </div>
266    <h3 id="See_also">
267      See also
268    </h3>
269    <ul>
270      <li>{{ CSS_border_image() }}
271      </li>
272    </ul>

Retour à l'historique