• Bordure image

    Retour sur les bordure image, en cette saison de fêtes; je ne vérifie pas si les attributs ont tous besoin des préfixes mais je pense qu'on doit pouvoir simplifier: voir derniers exemples, vérifiés sur Chrome, Firefox et Opera et sous Linux Ubuntu, pas sous Windows.

    Les bordures arrondies et les ombres semblent ne pas être acceptées ... à suivre !

    Stretch= étiré (le stretching est connu des sportifs) et slice=tranche répète plus ou moins le motif.

    <p id="borderimg1">&nbsp;</p><style><!--#borderimg1 { width:40vw; height:15vw; box-sizing:border-box; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; -o-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image-slice: 30%;} --></style>

    <p id="borderimg2">&nbsp;</p><style><!--#borderimg2 { width:40vw; height:15vw; box-sizing:border-box; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; -o-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image-slice: 20%;}--></style>

    <p id="borderimg3">&nbsp;</p><style><!--#borderimg3 { width:40vw; height:15vw; box-sizing:border-box; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; -o-border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image: url(http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif) round; border-image-slice: 10%;}--></style>

    <p id="borderimg4">&nbsp;</p><style><!--#borderimg4 { width:40vw; height:15vw; box-sizing:border-box; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) stretch; -o-border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) stretch; border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) stretch; border-image-slice: 20%;}--></style>

    <p id="borderimg5">&nbsp;</p><style><!--#borderimg5 { width:40vw; height:15vw; box-sizing:border-box; border: 15px solid black; padding: 15px; -webkit-border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) round; -o-border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) round; border-image: url(http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif) round; border-image-slice: 1%;}--></style>

    Ecriture simplifée mais pas d'arrondi accepté !
    <p id="bd1">votre texte</p>
    <style><!--
    #bd1 { width:40vw; height:15vw; box-sizing:border-box; border-radius:20%; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/6RSWOjHP72iEUHutR4ApjlyHOAo.gif) round;
    border-image-slice: 20%;}
    --></style>

    <p id="bd2">Votre texte</p>
    <style><!--
    #bd2 { width:40vw; height:15vw; box-sizing:border-box; border-radius:20%; border: 15px solid transparent; padding: 15px; -webkit-border-image: url(http://ekladata.com/6RSWOjHP72iEUHutR4ApjlyHOAo.gif) stretch;
    border-image-slice: 30%;}
    --></style>