CSS3 frontaliers Images
Avec le CSS3 border-image de propriété, vous pouvez définir une image pour être utilisé comme la frontière autour d' un élément.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image de la propriété
Le CSS3 border-image de la propriété vous permet de spécifier une image pour être utilisé au lieu de la frontière normale autour d' un élément.
La propriété comprend trois parties:
- L'image à utiliser comme la frontière
- Où couper l'image
- Définir si les sections intermédiaires doivent être répétés ou étirés
Nous allons utiliser l'image suivante (appelée "/css/border.png"):
La border-image propriété prend l'image et des tranches en neuf sections, comme un tic-tac-toe. Il place ensuite les coins dans les coins, et les sections centrales sont répétées ou étirée que vous spécifiez.
Remarque: Pour la border-image fonctionne, l'élément doit également la border ensemble de la propriété!
Ici, les sections intermédiaires de l'image sont répétées pour créer la frontière:
Une image comme une frontière!
Voici le code:
Exemple
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Essayez - le vous - même » Ici, les sections centrales de l'image sont étirés pour créer la frontière:
Une image comme une frontière!
Voici le code:
Exemple
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Essayez - le vous - même »  | Astuce: La border-image propriété est en fait un raccourci pour l' border-image-source la border-image-slice border-image-width border-image-outset border-image-repeat border-image-source , border-image-slice , border-image-width , border-image-outset et border-image-repeat propriétés. |
|---|
CSS3 border-images - Slice Valeurs distinctes
Les valeurs de tranche différents changements complètement le look de la frontière:
Exemple 1:
border-image: url(border.png) 50 tour;
Exemple 2:
border-image: url(border.png) 20% rond;
Exemple 3:
border-image: url(border.png) 30% ronde;
Voici le code:
Exemple
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Essayez - le vous - même » Testez-vous avec des exercices!
Propriétés frontaliers CSS3
| Propriété | La description |
|---|---|
| border-image | Un raccourci pour définir toutes les border-image-* propriétés |
| border-image-source | Indique le chemin d'accès à l'image pour être utilisé comme une frontière |
| border-image-slice | Indique comment découper l'image de la frontière |
| border-image-width | Indique la largeur de l'image de la frontière |
| border-image-outset | Indique le montant par lequel la zone d'image de la frontière se prolonge au-delà de la zone frontalière |
| border-image-repeat | Indique si l'image de la frontière doit être répétée, arrondie ou étirée |