• Liseré

    Un code permet de mettre un liseré autour ou sur une image mais sans arrondi.
    <div id="out">&nbsp;</div>
    <style><!--
    #out{position:relative; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/n5XwPd35c-b9BBJfaSnLfs6X9H8/IMG-3516.jpg'); outline: double 8px #ffffff; outline-offset: -55px; border-radius:100px;}
    --></style>
    outline définit le style du liseré et outline-offset définit sa place: 10px sera à 10 px, à l'extérieur et - 55px, de 55px à l'intérieur de l'image.

     

    Nous pouvons aussi réaliser le même genre de montage en plaçant l'image, en fond, et, par dessus, notre liseré qui alors, pourra être avec arrondis.

     

    Ce qui peut s'écrire ainsi:
    <div id="out1">
    <p id="lis">&nbsp;</p>
    </div>
    <style><!--
    #out1{position:relative; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/r3oeFgsNVqoej-PC0YNVrn9hUq0/DSCN6053.jpg'); border-radius:100px;}
    #lis{ transform:translate(45px,25px); width:700px; height:500px; border:10px double white; border-radius:100px;}
    --></style>

     

    On peut ajouter une ombre au liseré intérieur pour masquer son extérieur, sans déborder le cadre du montage (overflow:hidden;)
    <div id="out2">
    <p id="lis2">&nbsp;</p>
    </div>

    --><style type="text/css"><!--
    #out2{position:relative; overflow:hidden; margin:10px auto; width:800px; height:600px; border:4px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/pDDeoodQ8LL02QxR54I1p2Qk0JU/IMG-3513.jpg'); border-radius:100px;}
    #lis2{ transform:translate(45px,40px); width:700px; height:500px; border:10px double white; border-radius:100px; box-shadow:0px 0px 0px 100px rgba(128,128,128,0.7);}
    --></style>