Beispiel:CSS3 border-image schmuck.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;" />
	<link rel="stylesheet"  media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
	<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>

<h1>Schmuckrahmen mit <code>border-image</code></h1>

<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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_border-image_schmuck.html&oldid=66269“