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>

Verwendung von border-image

Textabsatz mit
border-image-repeat: stretch;

Textabsatz mit
border-image-repeat: round;

Textabsatz mit
border-image-repeat: repeat;

Textabsatz mit
border-image-repeat: space;

</body> </html>

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