Beispiel:CSS border-image-4.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>border-image</title>
		<style>
div > p {
	border: 5em solid;
	padding: 5em;
	width: 20em;
	background-color: grey;
	box-shadow: 1em 1em 2em silver inset;
}
		
.stretch {
     border-image-slice: 90 fill;
border-image-width: 5em;
border-image-outset: 0;
border-image-repeat:  stretch; 
  border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");
}

.zwo {

  border-image: linear-gradient(steelblue,gold)  1/  5em;
}



		</style>
	</head>
<body><h1>border-image als weitere Hintergrundebene</h1>
<div>
	<p class="stretch">Textabsatz</p>
</div>

<p>Abweichend von den oberen Beispielen wird mit <code>border-image-slice: 90 fill;</code> nicht nur der Rahmen, sondern auch die Mitte des Elements gezeichnet. Sie  wird über dem Hintergrund (<code>background-image</code>) und dem box-shadow gezeichnet.</p>
<div>
	<p class="zwo">Textabsatz</p>
</div>
<p>Mit dem Schlüsselwort fill könnte man auch hier <code>border-image</code> flächig verwenden. Als Bildquelle dient künftig ein Verlauf, der nicht mehr zurechtgeschnitten wird.</p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_border-image-4.html&oldid=99847“