Beispiel:CSS border-image-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Schmuckrahmen mit border-image</title> <style> img {

 border: 5em solid;

}

.schmuckrahmen {

 border-image-slice: 60 60 60 60;
 border-image-width: 5em;
 border-image-outset: 0px 0px 0px 0px;
 border-image-repeat: stretch repeat;
 border-image-source: url("https://upload.wikimedia.org/wikipedia/commons/0/04/Frame.svg"); 

}

figure {

 margin: 1em auto;
 width: 100%;
 max-width: 38em;

}

figcaption {

 text-align: center;

} </style> </head>

<body>

Schmuckrahmen mit border-image

<figure> <img class="schmuckrahmen" src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor"> <figcaption> Nürnberger Tor in Lauf an der Pegnitz</figcaption>

   </figure>    

</body> </html>