Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil) . Junte-se a nós e ajude a fazer o trabalho!
Summary
The border-image-repeat
CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
Initial value | stretch |
---|---|
Applies to | all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* border-image-repeat: type */ border-image-repeat: stretch; /* border-image-repeat: horizontal vertical */ border-image-repeat: round stretch; /* Global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset;
Values
- type
- One of the
stretch
,repeat
, orround
keywords denoting how the image is treated both horizontally and vertically. - horizontal
- One of the
stretch
,repeat
, orround
keywords denoting how the image is treated horizontally. - vertical
- One of the
stretch
,repeat
, orround
keywords denoting how the image is treated vertically. stretch
- Keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat
- Keyword indicating that the image must be repeated until it fills the gap between the two borders.
round
- Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
space
- The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
Formal syntax
[ stretch | repeat | round | space ]{1,2}
Example
CSS content
#borderImageRepetition { width: 260px; height: 80px; margin-bottom: 10px; border: 30px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* Can be changed in the live sample */ }
HTML content
<div id="borderImageRepetition"> </div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select>
JavaScript content
var repetition = document.getElementById("repetition"); repetition.addEventListener("change", function (evt) { document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value; });
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-repeat' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 15.0 | 15.0 (15.0) | 11 | 15 | 6 |
round |
30[3] | 15.0 (15.0) | 11 | ? | 9.1[4] |
space |
No support[1] | 50.0 (50.0)[2] | 11 | No support | 9.1[4] |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 15.0 (15.0) | No support | ? | 9.3[4] |
round |
? | 15.0 (15.0) | ? | ? | ? |
space |
? | 50.0 (50.0)[2] | ? | ? | ? |
[1] Supports the space
value, but the actual effect is the same as the repeat
value. See Chromium bug 584916.
[2] Implemented in bug 720531.
[3] See Chromium bug 169254.
[4] See WebKit bug 14185.
See also
Etiquetas do documento e colaboradores
Etiquetas:
Colaboradores desta página:
Sebastianz,
fscholz,
yisibl,
ziyunfei,
Majr,
jsx,
teoli,
sboroda,
KuroTora,
kscarfone,
lobaluna,
davy.martinez,
paulami_banerjee,
LouisLazaris,
amycb,
Sheppy,
ethertank,
wlach,
trevorh,
brianloveswords
Última atualização por:
Sebastianz,