ICI header("Location: http://www.mytesting.fr ");

LA PROPRIETE "BORDER-IMAGE"

par André MARINI 19 Janvier 2022, 19:48

La propriété border-image vous permet de spécifier une image à utiliser pour définir  la frontière normale autour d'un élément.

CODE

<!DOCTYPE html>
  <html>
  <head>
  <style>
  #borderimg1 {
      border: 1em solid transparent;
                      padding: 10px;
      -webkit-border-image: url(images/border1.jpg) 30 round; /* Safari
  3.1 à 5 */
      -o-border-image: url(images/border1.jpg) 30 round; /* Opera 11 à
  12.1 */
      border-image: url(images/border1.jpg) 30 round;
  }
  #borderimg2 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border2.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border2.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border2.jpg) 10% round;
  }
  #borderimg3 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border3.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border3.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border3.jpg) 10% round;
  }
  img{height: 150px;
  }
  </style>
  </head>
  <body>
  <p id="borderimg1">border-image: url(images/border1.jpg) 330
  round;</p>
  <p id="borderimg2">border-image: url(images/border2.jpg) 10%
  round;</p>
  <p id="borderimg3">border-image: url(images/border3.jpg) 10%
  round;</p>   
  <p> Voici les images utilisées:</p>    
  <p> <img src="http://www.oujood.com/propriete-css/images/border1.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="http://www.oujood.com/propriete-css/images/border2.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="http://www.oujood.com/propriete-css/images/border3.jpg" alt="" /> </p>
  </body>
  </html>

 

 

RESULTAT

border-image: url(images/border1.jpg) 330 round;

border-image: url(images/border2.jpg) 10% round;

border-image: url(images/border3.jpg) 10% round;

Voici les images utilisées:

             

commentaires

Haut de page