Beispiel:CSS border-image-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>border-image</title>
<style>
	p {
		border: 5em solid #aaa;
		padding:2em;
	}

.stretch {
	border-image-slice: 90 90;
	border-image-width: 5em;
	border-image-repeat: stretch;
	border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");
}
.round   {
	border-image-slice: 90 90;
	border-image-width: 5em;
	border-image-repeat: round;
	border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");
}
.repeat  {
	border-image-slice: 90 90;
	border-image-width: 5em;
	border-image-repeat: repeat;
	border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");
}
.space   {
	border-image-slice: 90 90;
	border-image-width: 5em;
	border-image-repeat: space;
	border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");
}

body {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
	gap: 2em;
}

h1 {
	grid-column: 1/-1;
}
</style>
</head>
<body><h1>Verwendung von <code>border-image</code></h1>

<p class="stretch">Textabsatz mit <br><code>border-image-repeat: stretch; </code></p>
<p class="round">Textabsatz mit <br><code>border-image-repeat: round;</code></p>
<p class="repeat">Textabsatz mit <br><code>border-image-repeat: repeat;</code></p>
<p class="space">Textabsatz mit <br><code>border-image-repeat: space;</code></p>

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