CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of CSS3 Background Clipping</title>
<style type="text/css">
.box {
width: 600px;
padding: 10px;
border: 6px dashed #333;
background: lime; }
.box1 {
background-clip: border-box;
}
.box2 {
background-clip: padding-box;
}
.box3 {
background-clip: content-box;
}
</style>
</head>
<div class="box box1"> la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur des frontiéres</div>
<div class="box box2">la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur du padding</div>
<div class="box box3">Bien entendu,la coloration de l'arriére plan est
limitée à la zone du contenu. </div>
</html>
Vous pouvez, tout à loisir, modifier la phrase que vous souhaitez mettre à l'intérieur du cadre. De même, vous pouvez modifier les dimensions du cadre que j'ai limitées, ici, à 600 px.
Vous pouvez modifier la couleur et faire en sorte que votre texte soit suffisamment long pour dépasser la première ligne.
jusqu'au bord extérieur des frontiéres
jusqu'au bord extérieur du padding
commentaires