• Bordure image

    J'ai repris les explications du site:  https://developer.mozilla.org/fr/docs/Web/CSS/border-image

    Dans cet exemple, j'ai créé une image (http://ekladata.com/FErGWPgjL0XP55Icuw8uX4kmJOc@150x150.png) avec 4 papillons différents aux angles et un papillon qui se répète sur les côtés.
    #bbd{width:60vw; height:25vw; background:pink; background-size:60vw 25vw; box-sizing:border-box; margin:1vh auto; text-align:left; font-size:1.5vw; border: 2vw solid transparent; border-image: url('http://ekladata.com/FErGWPgjL0XP55Icuw8uX4kmJOc@150x150.png') 55 round; }
    Dans cet exemple, j'ai copié puis hébergé sur Ekla une image du net, qui se répète en bordure.
    #bbd1{width:60vw; height:25vw; background:url('http://ekladata.com/X0_ahDRoPhdiCDshIBiE_XkuHkQ/4581.jpg'); box-sizing:border-box; margin:1vh auto; text-align:left; font-size:1.5vw; border: 2vw solid transparent; border-image:url('http://ekladata.com/IIENC4MwkVxVlsPMrA0YksnFBZk.png') 40 round; }
    Ce dernier pour parler des différentes valeurs dans le code de l'image.
    <div style="box-sizing: border-box; width: 60vw; height: 25vw; margin: 1vh auto; text-align: left; border: 2vw solid yellow; background: url('http://ekladata.com/udT-a91y1onmJ_y6ozd5odfAwzk/hump.jpg'); border-image: url('http://ekladata.com/Gf-_g93siljlKNBrvXmgOTdKVTk.png') 100/4vw/0vw round; padding: 3vw;">Ce dernier pour parler des diff&eacute;rentes valeurs dans le code de l'image.</div>

    box-sizing:border-box; permet de ne pas ajouter la bordure aux dimensions du cadre.

    100: est le % de l'image visible; à 100, elle est affichée en totalité.
    40px ou 4vw est la largeur de l'image sur les 4 côtés; on peut également définir sa largeur pour les côtés verticaux et les horizontaux en ajoutant 40px 60px, par exemple.
    0px ou 0vw est la distance de l'image par rapport au bord du cadre; sans valeur, la bordure est dans le cadre, avec valeur positive, elle s'en éloigne.
    round: l'image se répète sur les 4 côtés.
    round space: idem avec des espaces plus grands entre les images.
    repeat: comme round space chez moi.
    stretch: étire l'image pour remplir les côtés.
    round stretch: étire l'image selon côté.

    padding: est la distance du bord du cadre aux éléments de votre article.

    Les valeurs de la bordure (border:2vw solid yellow;) ne sont pas importants, mais il faut cette ligne pour placer la bordure image.

    Vous pouvez modifier ces attributs pour en voir l'action.

    Un dernier essai pour m'amuser...

    coucou