Beispiel:CSS3 border-image.html
Aus SELFHTML-Wiki
<!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>