Compare Revisions

border-image

Change Revisions

Revision 291529:

Revision 291529 by PetiPandaRou on

Revision 296278:

Revision 296278 by teoli on

Title:
border-image
border-image
Slug:
CSS/border-image
CSS/border-image
Tags:
css, NeedsMarkupWork, CSS Reference, NeedsBrowserCompatibility, CSS Référence
"css", "NeedsMarkupWork", "CSS Reference", "NeedsBrowserCompatibility"
Content:

Revision 291529
Revision 296278
n7    <div>n7    <p>
n9    </div>n9    </p>
n40none |n
41  &lt;image&gt; || [[&lt;number&gt; | &lt;percentage&gt; ]{1,4} &
>amp;&amp; fill?] [[/ [&lt;length&gt; | &lt;percentage&gt; | &lt;n 
>umber&gt; | auto ]{1,4} ]? [/ [&lt;length&gt; | &lt;number&gt; ]{ 
>1,4}]?] 
42  || [ stretch | repeat | round | space ]{1,2}
43</pre>
44    <p>
45      That is,
46    </p>
47    <pre class="eval">
48<em>none |
49  &lt;border-image-source&gt; || &lt;border-image-slice&gt; [40&lt;'border-image-source'&gt; || &lt;'border-image-slice'&gt; [ /
> / &lt;border-image-width&gt;? [ / &lt;‘border-image-outset’&gt> &lt;'border-image-width'&gt; |
>; ]? ]? 
50  || &lt;‘border-image-repeat’&gt;</em>41/ &lt;'border-image-width'&gt;? / &lt;'border-image-outset'&gt; ]
 >? || &lt;'border-image-repeat'&gt;
n55    <dl>n
56      <dt>
57        <code>none</code>
58      </dt>
59      <dd>
60        No image displayed; other border styles are used.
61      </dd>
62    </dl>
63    <h4 id="border-image-source">
64      border-image-source
65    </h4>
66    <p>
67      The image to use for the border.
68    </p>
69    <dl>
70      <dt>
71        <code>&lt;image&gt;</code> <small>(required)</small>
72      </dt>
73      <dd>
74        The image value is a {{ Xref_cssuri() }}, e.g. <code>url(
><span class="nowiki">http://example.org/image.png</span>)</code> 
75      </dd>
76    </dl>
77    <h4 id="border-image-slice">
78      border-image-slice
79    </h4>
80    <h4 id="border-image-width">
81      border-image-width
82    </h4>
83    <dl>
84      <dt>
85        <code>&lt;number&gt;</code> | <code>&lt;percentage&gt;</c
>ode> <small>(required)</small> 
86      </dt>
87      <dd>
88        <p>
89          One, two, three or four values represent inward offsets
> from the top, right, bottom and left edges of the image (respect 
>ively), dividing it into nine regions: four corners, four edges,  
>and a middle.<img alt="" src="/@api/deki/files/3683/=slice.png" s 
>tyle="float: right;"><br> 
90          <br>
91          One value belongs to all four sides of the image.<br>
92          Two values belong 1. to the top and bottom and 2. to th
>e right and left sides.<br> 
93          Three values belong 1. to the top, 2. to the right and 
>left sides, and 3. to the bottom.<br> 
94          Four values belong to the top, right, bottom, and left 
>sides, in that order.<br> 
95          <br>
96          <strong>Percentages</strong> are relative to the width/
>height of the image.<br> 
97          <strong>Numbers</strong> represent pixels in the image 
>(if the image is a raster image) or vector coordinates (if the im 
>age is an SVG image).<br> 
98          <br>
99          Negative values are not allowed.<br>
100          Values greater than the size of the image are interpret
>ed as 100%. 
101        </p>
102      </dd>
103      <dt>
104        fill <small>(optional)</small>
105      </dt>
106      <dd>
107        If the "fill" keyword is present, the middle part of the 
>border-image is preserved, and drawn as the background-image of t 
>he image. In Gecko 1.9.1 (Firefox 3.5) this is the default behavi 
>our; in Gecko 12, the default behaviour is to discard this area. 
108      </dd>
109    </dl>
110    <dl>
111      <dt>
112        &lt;number&gt; | &lt;percentage&gt; | auto <small>(requir
>ed)</small> 
113      </dt>
114      <dd>
115        <p>
116          The border image is drawn inside an area (the <em>borde
>r image area</em>) the boundaries of which correspond by default  
>to the border box (which may be changed by border-image-outset).  
>The four values specify the inward distances from the top, right, 
> bottom and left edges of the image (respectively).<br> 
117          <br>
118          One value belongs to all four sides of the area.<br>
119          Two values belong 1. to the top and bottom and 2. to th
>e right and left sides.<br> 
120          Three values belong 1. to the top, 2. to the right and 
>left sides, and 3. to the bottom.<br> 
121          Four values belong to the top, right, bottom, and left 
>sides, in that order.<br> 
122          <br>
123          <strong>Percentages</strong> refer to the width and hei
>ght of the border image area (as appropriate).<br> 
124          <strong>Numbers</strong> represent multiples of the cor
>responding computed border-width.<br> 
125          <strong>auto</strong> means that the intrinsic width/he
>ight (as applicable) of the corresponding image slice (border-ima 
>ge-slice) is used. If this is not available, then the border-widt 
>h values are used.<br> 
126          <br>
127          Negative values are not allowed.
128        </p>
129      </dd>
130    </dl>
131    <h4 id="border-image-outset">
132      border-image-outset
133    </h4>
134    <dl>
135      <dt>
136        <code>&lt;length&gt;</code> | <code>&lt;number&gt;</code>
> <small>(required)</small> 
137      </dt>
138      <dd>
139        <p>
140          The border-image-outset values specify the amount by wh
>ich the <em>border-image-area</em> extends beyond the border box. 
> Its four values specify the outsets for the top, right, bottom a 
>nd left edges of the box.<br> 
141          <br>
142          One value belongs to all four sides of the box.<br>
143          Two values belong 1. to the top and bottom and 2. to th
>e right and left sides.<br> 
144          Three values belong 1. to the top, 2. to the right and 
>left sides, and 3. to the bottom.<br> 
145          Four values belong to the top, right, bottom, and left 
>sides, in that order.<br> 
146          <br>
147          <strong>Numbers</strong> represent multiples of the cor
>responding computed border-width.<br> 
148          <br>
149          Negative values are not allowed.
150        </p>
151      </dd>
152    </dl>
153    <div>
154      Note: outset images may be clipped by an ancestor or by the
> viewport, so you may need to use other properties (such as margi 
>ns) if you wish to ensure that the full border-image is displayed 
>. 
155    </div>
156    <h4 id="border-image-repeat">
157      border-image-repeat
158    </h4>
159    <dl>
160      <dt>
161        <code>&lt;stretch&gt;</code> | <code>&lt;repeat&gt;</code
>> | <code>&lt;round&gt;</code> | <code>&lt;space&gt;</code> <smal 
>l>(required)</small> 
162      </dt>
163      <dd>
164        <p>
165          Specifies how the images for the sides and the middle p
>art of the border-image are scaled and tiled.<br> 
166          <br>
167          One value belongs to both the horizontal and vertical s
>ides.<br> 
168          Two values belong to 1. the horizontal sides, and 2. th
>e vertical sides.<br> 
169          <br>
170          <strong>stretch</strong> specifies that the image shoul
>d be stretched to fill the area.<br> 
171          <strong>repeat</strong> indicates that the image should
> be tiled (repeated) to fill the area.<br> 
172          <strong>round</strong> means that the image is tiled to
> fill the area; if a whole number of tiles cannot be used to fill 
> the area, the image is rescaled such that a whole number of tile 
>s may be used.<br> 
173          <strong>space</strong> specifies that the image should 
>be tiled to fill the area; if a whole number of tiles cannot be u 
>sed to fill the area, the extra space is distributed around the t 
>iles. 
174        </p>
175      </dd>
176    </dl>
n186    <div class="note">n
187      <strong>Note:</strong>&nbsp; Features beyond basic support 
>are not yet documented in above sections. Please read the spec if 
> you are interested. 
188    </div>
189    <div class="note">
190      <strong>Note:</strong> An earlier version of the specificat
>ion was implemented in Gecko versions prior to 15.&nbsp; 
191    </div>
n224                {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefn87                {{ CompatGeckoDesktop("1.9.1") }}{{ property_pref
>ix("-moz") }}>ix("-moz") }} [1]
tt232      <li>[1]An earlier version of the specification was implemen
 >ted, prefixed, in Gecko versions prior to 15.
233      </li>
369      <li>Unusually, for Opera, the prefixed property was added <234      <li>[2] for Opera, the prefixed property was added <em>afte
>em>after</em> the non-prefixed.>r</em> the non-prefixed.

Back to History