Beispiel:CSS3 border-image.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">
		<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>border-image</title>
		<style>
			p {
				border: solid #aaa;
				border-width: 99px 102px;
				padding:2em;
				width:20em;
			}

			.stretch {
				-moz-border-image:    url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
				-webkit-border-image: url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
				border-image:         url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
			}

			.repeat  {
				-moz-border-image:    url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
				-webkit-border-image: url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
				border-image:         url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
			}

			.space   {
				-moz-border-image:    url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
				-webkit-border-image: url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
				border-image:         url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
			}

			.round   {
				-moz-border-image:    url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
				-webkit-border-image: url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
				border-image:         url(https://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
			}
		</style>
	</head>
	<body>
		<h1>Verwendung von <code>border-image</code></h1>
		<main>
			<p class="stretch">Textabsatz mit stretch.</p>
			<p class="repeat">Textabsatz mit repeat.</p>
			<p class="space">Textabsatz mit space.</p>
			<p class="round">Textabsatz mit round.</p>
		</main>
	</body>
</html>