/image%2F1305151%2F20141105%2Fob_142d72_9ag.jpg)
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="" />
<img
src="http://www.oujood.com/propriete-css/images/border2.jpg" alt="" />
<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:
/image%2F1305151%2F20220121%2Fob_1768d3_cul.jpg)
/image%2F1305151%2F20220120%2Fob_fd27f1_9.JPG)
/image%2F1305151%2F20210921%2Fob_34bf31_essai1.jpg)
/image%2F1305151%2F20210917%2Fob_b10a1c_index.jpeg)
Haut de page
commentaires